Flutter set rounded border Flutter rounded background
Inscription
- Holding the sword in the world, starting from your accumulation, you must strive for excellence wherever you go.
More application knowledge points, the editor has summarized in the book
Use the Container container here to achieve the rounded rectangle border effect
1 rounded rectangle border
Container(
margin: EdgeInsets.only(left: 40, top: 40),
//Set the child to center
alignment: Alignment(0, 0),
height: 50,
width: 300,
// border settings
decoration: new BoxDecoration(
//background
color: Colors.white,
//Set the rounded corner angle
borderRadius: BorderRadius.all(Radius.circular(4.0)),
//Set the surrounding border
border: new Border.all(width: 1, color: Colors.red),
),
child: Text("Container's rounded border"),
),
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
2 rounded rectangle border
Container(
margin: EdgeInsets.only(left: 40, top: 40),
//Set the child to center
alignment: Alignment(0, 0),
height: 50,
width: 300,
// border settings
decoration: new BoxDecoration(
//background
color: Colors.white,
//Set the angle of the rounded corners. The angle here should be half of the height of the parent Container
borderRadius: BorderRadius.all(Radius.circular(25.0)),
//Set the surrounding border
border: new Border.all(width: 1, color: Colors.red),
),
child: Text("Container's rounded border"),
),
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
3 Clickable rounded rectangle border
Use InkWell to achieve, more about InkWell, please check flutter InkWell set water ripple click effect details
Container(
margin: EdgeInsets.only(left: 40, top: 40),
child: new Material(
//INK can implement decoration container
child: new Ink(
//Use ink rounded rectangle
// color: Colors.red,
decoration: new BoxDecoration(
//background
color: Colors.white,
//Set the rounded corner angle
borderRadius: BorderRadius.all(Radius.circular(25.0)),
//Set the surrounding border
border: new Border.all(width: 1, color: Colors.red),
),
child: new InkWell(
//The rounded corners are set, and the same rounded corners are also set for the water ripples
//If this is not set, a rectangular water ripple effect will appear
borderRadius: new BorderRadius.circular(25.0),
//Set the click event callback
onTap: () {},
child: Container(
//Set the child to center
alignment: Alignment(0, 0),
height: 50,
width: 300,
child: Text("Click the rounded border of the Container"),
)),
),
),
),
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
4 Clickable rounded rectangle borders
Container(
margin: EdgeInsets.only(left: 40, top: 40),
child: new Material(
child: new Ink(
//set background
decoration: new BoxDecoration(
//background
color: Colors.white,
//Set the rounded corner angle
borderRadius: BorderRadius.all(Radius.circular(25.0)),
//Set the surrounding border
border: new Border.all(width: 1, color: Colors.red),
),
child: new InkResponse(
borderRadius: new BorderRadius.all(new Radius.circular(25.0)),
//The control displayed when the click or toch control is highlighted is on the upper layer of the control and the lower layer of the water ripple
// highlightColor: Colors.deepPurple,
//Click or the shape highlighted by the toch control
highlightShape: BoxShape.rectangle,
//. The radius inside the InkResponse should be noted that we need the radius to be larger than the width of the control. If the radius is too small, the displayed water ripple is a small circle.
// The radius of the water ripple
radius: 300.0,
// color of water ripples
splashColor: Colors.yellow,
//true means that the interface of the water ripple response is to be clipped. false is not clipped. If the control is rounded and not clipped, the water ripple is a rectangle.
containedInkWell: true,
//click event
onTap: () {
print("click");
},
child: Container(
//Set the child to center
alignment: Alignment(0, 0),
height: 50,
width: 300,
child: Text("Click the rounded border of the Container"),
),
),
),
),
),
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
[1] Currently, the Flutter series of tutorials are published for free on the watermelon video , which is updated daily. Welcome to pay attention to receive reminders and click to view the tips
[2] This official account will publish a series of special articles for the first time, and paid video courses will be published in the official account for free. On your way to work or just before going to bed, this official account is a small choice for you to browse knowledge and dry goods. , Collection is not as good as action, at that moment, the official account will remind you that it is time to learn.
