+- 0Day Forums (https://0day.red)
+-- Forum: Coding (https://0day.red/Forum-Coding)
+--- Forum: Flutter & Dart (https://0day.red/Forum-Flutter-Dart)
+--- Thread: How can I add a border to a widget in Flutter? (/Thread-How-can-I-add-a-border-to-a-widget-in-Flutter)
Pages:
1
2
How can I add a border to a widget in Flutter? - autarchy639802 - 07-21-2023
I'm using Flutter and I'd like to add a border to a widget (in this case, a `Text` widget).
I tried `TextStyle` and `Text`, but I didn't see how to add a border.
RE: How can I add a border to a widget in Flutter? - ostentatious906367 - 07-21-2023
Here is an expanded answer. A `DecoratedBox` is what you need to add a border, but I am using a `Container` for the convenience of adding margin and padding.
Here is the general setup.
[![enter image description here][1]][1]
Widget myWidget() {
return Container(
margin: const EdgeInsets.all(30.0),
padding: const EdgeInsets.all(10.0),
decoration: myBoxDecoration(), // <--- BoxDecoration here
child: Text(
"text",
style: TextStyle(fontSize: 30.0),
),
);
}
where the `BoxDecoration` is
BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(),
);
}
# Border width
[![enter image description here][2]][2]
These have a border width of `1`, `3`, and `10` respectively.
BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(
width: 1, // <--- border width here
),
);
}
# Border color
[![enter image description here][3]][3]
These have a border color of
- `Colors.red`
- `Colors.blue`
- `Colors.green`
Code
BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(
color: Colors.red, // <--- border color
width: 5.0,
),
);
}
# Border side
[![enter image description here][4]][4]
These have a border side of
- left (3.0), top (3.0)
- bottom (13.0)
- left (blue[100], 15.0), top (blue[300], 10.0), right (blue[500], 5.0), bottom (blue[800], 3.0)
Code
BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border(
left: BorderSide( // <--- left side
color: Colors.black,
width: 3.0,
),
top: BorderSide( // <--- top side
color: Colors.black,
width: 3.0,
),
),
);
}
# Border radius
[![enter image description here][5]][5]
These have border radii of `5`, `10`, and `30` respectively.
BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(
width: 3.0
),
borderRadius: BorderRadius.all(
Radius.circular(5.0) // <--- border radius here
),
);
}
# Going on
[`DecoratedBox`][6]/[`BoxDecoration`][7] are very flexible. Read [Flutter — BoxDecoration Cheat Sheet][8] for many more ideas.
[1]:
[2]:
[3]:
[4]:
[5]:
[6]:
[To see links please register here]
[7]:[To see links please register here]
[8]:[To see links please register here]
RE: How can I add a border to a widget in Flutter? - outlinger374285 - 07-21-2023
You can use Container to contain your widget:
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff000000),
width: 1,
)),
child: Text()
),
RE: How can I add a border to a widget in Flutter? - blinnixqioqm - 07-21-2023
Use a container with Boxdercoration.
BoxDecoration(
border: Border.all(
width: 3.0
),
borderRadius: BorderRadius.circular(10.0)
);
RE: How can I add a border to a widget in Flutter? - maxey692 - 07-21-2023
As stated in the documentation, Flutter prefers composition over parameters.
Most of the time you're not looking for a property, but instead a wrapper (and sometimes a few helpers/"builder").
For borders, you want `DecoratedBox`, which has a `decoration` property that defines borders; but also background images or shadows.
Alternatively, like [Aziza said][1], you can use `Container`. Which is the combination of `DecoratedBox`, `SizedBox` and a few other useful widgets.
[1]:
[To see links please register here]
RE: How can I add a border to a widget in Flutter? - harmonic292 - 07-21-2023
**The best way is using BoxDecoration()**
Advantage
* You can set the **border** of a widget
* You can set the border **Color** or **Width**
* You can set a **Rounded corner** of a border
* You can add a **Shadow** of a widget
Disadvantage
* `BoxDecoration` only use with `Container` widget, so you want to wrap your widget in `Container()`
Example
Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.orange,
border: Border.all(
color: Colors.pink[800], // Set border color
width: 3.0), // Set border width
borderRadius: BorderRadius.all(
Radius.circular(10.0)), // Set rounded corner radius
boxShadow: [BoxShadow(blurRadius: 10,color: Colors.black,offset: Offset(1,3))] // Make rounded corner of border
),
child: Text("My demo styling"),
)
[![Enter image description here][1]][1]
[1]:
RE: How can I add a border to a widget in Flutter? - Mrnikolettav - 07-21-2023
Here, as the **[Text][1]** widget does not have a property that allows us to define a `border`, we should wrap it with a widget that allows us to define a border.
There are several solutions.
But the best solution is the use of **[BoxDecoration][2]** in the [Container][3] widget.
**Why choose to use BoxDecoration?**
Because BoxDecoration offers more customization like the possibility to define:
First, the `border` and also define:
- border Color
- border width
- border radius
- shape
- and more ...
**An example:**
Container(
child:Text(' Hello Word '),
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(
color: Colors.red ,
width: 2.0 ,
),
borderRadius: BorderRadius.circular(15),
),
),
Output:
[![Enter image description here][4]][4]
[1]:
[To see links please register here]
[2]:[To see links please register here]
[3]:[To see links please register here]
[4]:RE: How can I add a border to a widget in Flutter? - margueritau - 07-21-2023
If you want to add border to some text of container then you can easily to do it by applying BoxDecoration to Container.
code :
```dart
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.redAccent,
width: 1,
),
),
child: Text('Some Text'),
);
```
RE: How can I add a border to a widget in Flutter? - tatokggi - 07-21-2023
In case someone would like a outlined/bordered text or apply multiple borders.
You could try this:
[To see links please register here]
[![enter image description here][1]][1]
[DEMO][2]
[1]:
[2]:
[To see links please register here]
RE: How can I add a border to a widget in Flutter? - martelleaa - 07-21-2023
You can add the `Text` as a `child` to a `Container` that has a `BoxDecoration` with `border` property:
[![enter image description here][1]][1]
```dart
Container(
margin: const EdgeInsets.all(15.0),
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent)
),
child: Text('My Awesome Border'),
)
```
[1]: