英文:
BackgroundColor of the Container only wrap the text inside Expanded Widget
问题
I have a design like Pic 1, and my problem is that the text will be wrapped in a Container with background gradient, but since I'm using the Expanded to wrap this Container, so it always gets all the empty space like picture 2, which won't match the design.
If I'm using the Flexible, how can I align the arrow icon to the end of the row as shown in picture 3.
Please help me find a solution, thanks.
英文:
I have a design like Pic 1,and my problem is that the text will be wrapped in a Container with background gradient, but since i'm using the Expanded to wrap this Container, so it's always get all the empty space like picture 2,which won't match the design.
If i'm using the Flexible,how can i align the arrow icon to the end of row as show in picture 3.
Please help me to find a solution, tks.
Container(
width: 400,
height: 300,
color: Colors.blue,
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
children: [
Flexible(
child: Container(
color: Colors.white,
child: Text("Công thực tế:21 công"))),
Align(
alignment: Alignment.topRight,
child: Icon(Icons.arrow_circle_right))
],
),
)
],
),
),
[Pic 1](https://i.stack.imgur.com/2HWAZ.png)
[Pic 2](https://i.stack.imgur.com/m5aQy.png)
[pic 3](https://i.stack.imgur.com/XUrrR.png)
Find a solution for this code
答案1
得分: 1
I will translate the code part for you:
Container(
margin: EdgeInsets.fromLTRB(16, 16, 16, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Container(
color: Colors.white,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: Text("Công thực tế: 21 công"),
)
],
),
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24),
border: Border.all(
width: 1,
color: Colors.black.withOpacity(0.45),
),
),
child: Icon(
Icons.expand_more_outlined,
color: Colors.black.withOpacity(0.45),
),
),
],
),
)
英文:
Ah, nevermind, i just found a solution, using the Flexible and MainAxisAlignment.spaceBetween, i will put my code below, thanks for your help.
Container(
margin: EdgeInsets.fromLTRB(16, 16, 16, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Container(
color: Colors.white,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: Text("Công thực tế: 21 công"),
)
],
),
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24),
border: Border.all(
width: 1, color: Colors.black.withOpacity(0.45))),
child: Icon(Icons.expand_more_outlined,
color: Colors.black.withOpacity(0.45)),
),
],
),
)
答案2
得分: 0
你可以尝试这个:
child: Container(
height: 200,
width: 300,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topRight: Radius.circular(10.0),
bottomRight: Radius.circular(10.0),
topLeft: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0),
),
),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: 50,
width: 200,
decoration: BoxDecoration(
color: Colors.blue.shade900,
borderRadius: BorderRadius.only(
topRight: Radius.circular(40.0),
bottomRight: Radius.circular(40.0),
topLeft: Radius.circular(40.0),
bottomLeft: Radius.circular(40.0),
),
),
child: Center(child: Text('Text', style: TextStyle(color: Colors.white))),
),
CircleAvatar(
backgroundColor: Colors.blue.shade900,
radius: 20,
child: IconButton(
padding: EdgeInsets.zero,
icon: Icon(Icons.keyboard_arrow_up),
color: Colors.white,
onPressed: () {},
),
),
],
),
],
),
),
),
英文:
you can try this:
output
child: Container(
height: 200,
width: 300,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topRight: Radius.circular(10.0),
bottomRight: Radius.circular(10.0),
topLeft: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0),
),
),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: 50,
width: 200,
decoration: BoxDecoration(
color: Colors.blue.shade900,
borderRadius: BorderRadius.only(
topRight: Radius.circular(40.0),
bottomRight: Radius.circular(40.0),
topLeft: Radius.circular(40.0),
bottomLeft: Radius.circular(40.0),
),
),
child:
Center(child: Text('Text',style: TextStyle(color: Colors.white))),
),
CircleAvatar(
backgroundColor: Colors.blue.shade900,
radius: 20,
child: IconButton(
padding: EdgeInsets.zero,
icon: Icon(Icons.keyboard_arrow_up),
color: Colors.white,
onPressed: () {},
),
),
],
),
],
),
),
),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论