I was trying to create an app with Flutter and Dart and I was wondering if there was a way to go newline if a container inside a row overflows.
Here's an example, the thing I want to do is to make the "button" go newline if it intersects into another one to make it more readable.
I hope someone can help me, I will link the code also for a better understanding.
Padding(
padding: EdgeInsets.fromLTRB(0, MediaQuery.of(context).size.height/40, 0, 0),
child: Column(
children: [
Row( //I tre bottoni di 'Like', 'Commenta' e 'Condividi'
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container( //Like button
width: MediaQuery.of(context).size.width/4,
height: MediaQuery.of(context).size.height/15,
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.blue,
spreadRadius: 5,
blurRadius: 20,
)
]
),
child: Row( //Contenuto del container, 'child:' perché è il figlio del container
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [ //'Children:[]' perché contiene più elementi
Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 5, 0),
child: Icon(
Icons.thumb_up, color: Colors.white,
size: MediaQuery.of(context).size.height/40,
),
),
Center(
child: Text('Like',
overflow: TextOverflow.fade,
style: TextStyle(
fontSize: MediaQuery.of(context).size.height/40,
fontFamily: 'Poppins',
color: Colors.white,
),
),
),
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(MediaQuery.of(context).size.width/40, 0, MediaQuery.of(context).size.width/40, 0),
child: Container( //Comment button
width: MediaQuery.of(context).size.width/4,
height: MediaQuery.of(context).size.height/15,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.green,
boxShadow: [
BoxShadow(
color: Colors.green,
spreadRadius: 5,
blurRadius: 20,
)
]
),
child: Row( //Contenuto del secondo bottone (quello centrale)
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(30, 0, 5, 0),
child: Icon(
Icons.message, color: Colors.white,
size: MediaQuery.of(context).size.height/40,
),
),
Text('Commenta',
overflow: TextOverflow.clip,
style: TextStyle(
fontSize: MediaQuery.of(context).size.height/40,
fontFamily: 'Poppins',
color: Colors.white,
),
),
],),
),
),
Container( //Share post button
width: MediaQuery.of(context).size.width/4,
height: MediaQuery.of(context).size.height/15,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.red,
boxShadow: [ //Parentesi quadre perché può contenere più proprietà, è perciò una lista
BoxShadow(
color: Colors.red,
spreadRadius: 5,
blurRadius: 20,
)
]
),
child: Row( //Contenuto del container
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 5, 0),
child: Icon(
Icons.share, color: Colors.white,
size: MediaQuery.of(context).size.height/40,
),
),
Text('Condividi',
style: TextStyle(
fontSize: MediaQuery.of(context).size.height/40,
fontFamily: 'Poppins',
color: Colors.white,
),
)
]
)
),
],
),
],
),
)
],),
Method1: You have to use Flexible widget to avoid overflow.
Padding(
padding: EdgeInsets.fromLTRB(0, MediaQuery.of(context).size.height/40, 0, 0),
child: Column(
children: [
Row( //I tre bottoni di 'Like', 'Commenta' e 'Condividi'
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container( //Like button
width: MediaQuery.of(context).size.width/4,
height: MediaQuery.of(context).size.height/15,
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.blue,
spreadRadius: 5,
blurRadius: 20,
)
]
),
child: Row( //Contenuto del container, 'child:' perché è il figlio del container
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [ //'Children:[]' perché contiene più elementi
Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 5, 0),
child: Icon(
Icons.thumb_up, color: Colors.white,
size: MediaQuery.of(context).size.height/40,
),
),
Flexible(
child: Center(
child: Text('Like',
overflow: TextOverflow.fade,
style: TextStyle(
fontSize: MediaQuery.of(context).size.height/40,
fontFamily: 'Poppins',
color: Colors.white,
),
),
),
),
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(MediaQuery.of(context).size.width/40, 0, MediaQuery.of(context).size.width/40, 0),
child: Container( //Comment button
width: MediaQuery.of(context).size.width/4,
height: MediaQuery.of(context).size.height/15,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.green,
boxShadow: [
BoxShadow(
color: Colors.green,
spreadRadius: 5,
blurRadius: 20,
)
]
),
child: Row( //Contenuto del secondo bottone (quello centrale)
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(30, 0, 5, 0),
child: Icon(
Icons.message, color: Colors.white,
size: MediaQuery.of(context).size.height/40,
),
),
Flexible(
child: Text('Commenta',
overflow: TextOverflow.clip,
style: TextStyle(
fontSize: MediaQuery.of(context).size.height/40,
fontFamily: 'Poppins',
color: Colors.white,
),
),
),
],),
),
),
Container( //Share post button
width: MediaQuery.of(context).size.width/4,
height: MediaQuery.of(context).size.height/15,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.red,
boxShadow: [ //Parentesi quadre perché può contenere più proprietà, è perciò una lista
BoxShadow(
color: Colors.red,
spreadRadius: 5,
blurRadius: 20,
)
]
),
child: Row( //Contenuto del container
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 5, 0),
child: Icon(
Icons.share, color: Colors.white,
size: MediaQuery.of(context).size.height/40,
),
),
Flexible(
child: Text('Condividi',
style: TextStyle(
fontSize: MediaQuery.of(context).size.height/40,
fontFamily: 'Poppins',
color: Colors.white,
),
),
)
]
)
),
],
),
],
),
)
Edited
Method 2:
Padding(
padding: EdgeInsets.fromLTRB(0, MediaQuery.of(context).size.height / 40, 0, 0),
child: Column(
children: [
Row(
//I tre bottoni di 'Like', 'Commenta' e 'Condividi'
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
//Like button
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.blue,
spreadRadius: 5,
blurRadius: 20,
)
]),
child: Row(
//Contenuto del container, 'child:' perché è il figlio del container
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
//'Children:[]' perché contiene più elementi
Padding(
padding: const EdgeInsets.only(right: 5),
child: Icon(
Icons.thumb_up,
color: Colors.white,
size: MediaQuery.of(context).size.height / 40,
),
),
Flexible(
child: Center(
child: Text(
'Like',
overflow: TextOverflow.fade,
style: TextStyle(
fontSize: MediaQuery.of(context).size.height / 40,
fontFamily: 'Poppins',
color: Colors.white,
),
),
),
),
],
),
),
),
Expanded(
child: Container(
//Comment button
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(10),
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.green,
boxShadow: [
BoxShadow(
color: Colors.green,
spreadRadius: 5,
blurRadius: 20,
)
]),
child: Row(
//Contenuto del secondo bottone (quello centrale)
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(right: 5),
child: Icon(
Icons.message,
color: Colors.white,
size: MediaQuery.of(context).size.height / 40,
),
),
Flexible(
child: Text(
'Commenta',
overflow: TextOverflow.clip,
style: TextStyle(
fontSize: MediaQuery.of(context).size.height / 40,
fontFamily: 'Poppins',
color: Colors.white,
),
),
),
],
),
),
),
Expanded(
child: Container(
//Share post button
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(10),
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.red,
boxShadow: [
//Parentesi quadre perché può contenere più proprietà, è perciò una lista
BoxShadow(
color: Colors.red,
spreadRadius: 5,
blurRadius: 20,
)
]),
child: Row(
//Contenuto del container
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(right: 5),
child: Icon(
Icons.share,
color: Colors.white,
size: MediaQuery.of(context).size.height / 40,
),
),
Flexible(
child: Text(
'Condividi',
style: TextStyle(
fontSize: MediaQuery.of(context).size.height / 40,
fontFamily: 'Poppins',
color: Colors.white,
),
),
)
])),
),
],
),
],
),
)
Method 3: Try with Wrap to make the buttons in multiple lines but text will be in single line
Padding(
padding: EdgeInsets.fromLTRB(0, MediaQuery.of(context).size.height / 40, 0, 0),
child: Column(
children: [
Container(
width: double.infinity,
child: Wrap(
alignment: WrapAlignment.center,
children: [
Container(
//Like button
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.blue,
spreadRadius: 5,
blurRadius: 20,
)
]),
child: Row(
mainAxisSize: MainAxisSize.min,
//Contenuto del container, 'child:' perché è il figlio del container
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
//'Children:[]' perché contiene più elementi
Padding(
padding: const EdgeInsets.only(right: 5),
child: Icon(
Icons.thumb_up,
color: Colors.white,
size: MediaQuery.of(context).size.height / 40,
),
),
Flexible(
child: Text(
'Like',
overflow: TextOverflow.fade,
style: TextStyle(
fontSize: MediaQuery.of(context).size.height / 40,
fontFamily: 'Poppins',
color: Colors.white,
),
),
),
],
),
),
Container(
//Comment button
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(10),
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.green,
boxShadow: [
BoxShadow(
color: Colors.green,
spreadRadius: 5,
blurRadius: 20,
)
]),
child: Row(
//Contenuto del secondo bottone (quello centrale)
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(right: 5),
child: Icon(
Icons.message,
color: Colors.white,
size: MediaQuery.of(context).size.height / 40,
),
),
Flexible(
child: Text(
'Commenta',
overflow: TextOverflow.clip,
style: TextStyle(
fontSize: MediaQuery.of(context).size.height / 40,
fontFamily: 'Poppins',
color: Colors.white,
),
),
),
],
),
),
Container(
//Share post button
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(10),
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.red,
boxShadow: [
//Parentesi quadre perché può contenere più proprietà, è perciò una lista
BoxShadow(
color: Colors.red,
spreadRadius: 5,
blurRadius: 20,
)
]),
child: Row(
//Contenuto del container
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(right: 5),
child: Icon(
Icons.share,
color: Colors.white,
size: MediaQuery.of(context).size.height / 40,
),
),
Flexible(
child: Text(
'Condividi',
style: TextStyle(
fontSize: MediaQuery.of(context).size.height / 40,
fontFamily: 'Poppins',
color: Colors.white,
),
),
)
])),
],
),
),
],
),
)
Just figured out the problem, I put the Wrap widget in the wrong position and now it works as needed.
Here's the code to help others who have the same problem.
Wrap(children: [
Row( //I tre bottoni di 'Like', 'Commenta' e 'Condividi'
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container( //Like button
width: MediaQuery.of(context).size.width/4,
height: MediaQuery.of(context).size.height/15,
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.blue,
spreadRadius: 5,
blurRadius: 20,
)
]
),
child: Row( //Contenuto del container, 'child:' perché è il figlio del container
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [ //'Children:[]' perché contiene più elementi
Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 5, 0),
child: Icon(
Icons.thumb_up, color: Colors.white,
size: MediaQuery.of(context).size.height/40,
),
),
Flexible(
child: Text('Like',
overflow: TextOverflow.fade,
style: TextStyle(
fontSize: MediaQuery.of(context).size.height/40,
fontFamily: 'Poppins',
color: Colors.white,
),
),
),
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(MediaQuery.of(context).size.width/40, 0, MediaQuery.of(context).size.width/40, 0),
child: Container( //Comment button
width: MediaQuery.of(context).size.width/4,
height: MediaQuery.of(context).size.height/15,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.green,
boxShadow: [
BoxShadow(
color: Colors.green,
spreadRadius: 5,
blurRadius: 20,
)
]
),
child: Row( //Contenuto del secondo bottone (quello centrale)
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(30, 0, 5, 0),
child: Icon(
Icons.message, color: Colors.white,
size: MediaQuery.of(context).size.height/40,
),
),
Flexible(
child: Text('Commenta',
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: MediaQuery.of(context).size.height/40,
fontFamily: 'Poppins',
color: Colors.white,
),
),
),
],),
),
),
Container( //Share post button
width: MediaQuery.of(context).size.width/4,
height: MediaQuery.of(context).size.height/15,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.red,
boxShadow: [ //Parentesi quadre perché può contenere più proprietà, è perciò una lista
BoxShadow(
color: Colors.red,
spreadRadius: 5,
blurRadius: 20,
)
]
),
child: Row( //Contenuto del container
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 5, 0),
child: Icon(
Icons.share, color: Colors.white,
size: MediaQuery.of(context).size.height/40,
),
),
Flexible(
child: Text('Condividi',
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: MediaQuery.of(context).size.height/40,
fontFamily: 'Poppins',
color: Colors.white,
),
),
)
]
)
),
],
),
],
```
Related
can someone Please help me clone this ui I got it from Dribble and Im facing the problem with the box radius.
I tried using a stack but it doesnt show the container radius maybe i need to use a custom widget.
Please any help is needed i am stuck on this problem.
Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title:Text(DateTimeFormat.format(DateTime.now(),format: 'D M, Y')
,style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 26
),),
actions: [
IconButton(
icon: const Icon(Icons.filter_list_outlined),
tooltip: 'Filter By date',
onPressed: () {
},
),
],
elevation: 0,
backgroundColor: Color(0xff405cbf),
),
body: SingleChildScrollView(
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 100,
color: Color(0xff405cbf),
child: const Padding(
padding: EdgeInsets.fromLTRB(0, 70, 0, 0),
child: Icon(Icons.maximize_outlined,size: 70,color: Colors.white60,),
)
),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20)
),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
color: Colors.grey.shade600,
spreadRadius: 1,
blurRadius: 15
)
]
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 30),
child: Text("History of Tips",style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.black
),),
),
GFCard(
color: Colors.white60,
boxFit: BoxFit.cover,
content: Column(
children: [
Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("date"),
SizedBox(width: 150,),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("Odd"),
Divider(color: Colors.black,),
Text("Status")
],
)
],
),
],
)
)
],
),
),
),
],
),
),
);
I added in some box shadow and some different colors but still it's not quite right.
You need to add the appbar inside your body like this:
Scaffold(
key: _scaffoldKey,
backgroundColor: Color(0xff405cbf),
body: Stack(
children: [
AppBar(
title: Text(
DateTimeFormat.format(DateTime.now(), format: 'D M, Y'),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 26),
),
actions: [
IconButton(
icon: const Icon(Icons.filter_list_outlined),
tooltip: 'Filter By date',
onPressed: () {},
),
],
elevation: 0,
backgroundColor: Color(0xff405cbf),
),
SingleChildScrollView(
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 100,
color: Color(0xff405cbf),
child: const Padding(
padding: EdgeInsets.fromLTRB(0, 70, 0, 0),
child: Icon(
Icons.maximize_outlined,
size: 70,
color: Colors.white60,
),
)),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20)),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
color: Colors.grey.shade600,
spreadRadius: 1,
blurRadius: 15)
]),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 30),
child: Text(
"History of Tips",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.black),
),
),
GFCard(
color: Colors.white60,
boxFit: BoxFit.cover,
content: Column(
children: [
Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("date"),
SizedBox(
width: 150,
),
Column(
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Text("Odd"),
Divider(
color: Colors.black,
),
Text("Status")
],
)
],
),
],
))
],
),
),
),
],
),
),
],
),
)
here is my currently code:
body: Scaffold(
body: Card(
margin: EdgeInsets.all(20),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Container(
width: 400,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.ice_skating,
size: 30,
color: Colors.black,
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 5,
),
Text("spots",
style:
TextStyle(color: Colors.black.withOpacity(0.6)))
],
),
],
),
),
),
))),
but i want it like this:
The 2nd Column you have used should be a Row
body: Scaffold(
body: Card(
margin: EdgeInsets.all(20),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Container(
width: 400,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.ice_skating,
size: 30,
color: Colors.black,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,//this line is important for providing equal space
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 5,
),
Text("spots",
style:
TextStyle(color: Colors.black.withOpacity(0.6)))
],
),
],
),
),
),
))),
Card(
margin: const EdgeInsets.all(20),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Container(
width: 400,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Text',
style: TextStyle(fontSize: 18),
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"spots",
style: TextStyle(
color: Colors.black.withOpacity(0.6),
),
),
const Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
const SizedBox(
height: 5,
),
const Icon(
Icons.ice_skating,
size: 30,
color: Colors.black,
),
],
),
],
),
),
),
),
return Scaffold(
body: Card(
margin: EdgeInsets.all(20),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Container(
width: 400,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
Text("spots",
style:
TextStyle(color: Colors.black.withOpacity(0.6))),
Icon(
Icons.ice_skating,
size: 30,
color: Colors.black,
),
],
),
],
),
),
),
));
Output
Scaffold(
resizeToAvoidBottomInset: false,
body: Container(
height: 100,
width: MediaQuery.of(context).size.width * 1,
color: const Color(0xFF722a8c),
child: ListView(
children: [
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 10),
child: Text(
"COLORS ",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
const SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(left: 28),
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 0),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(20),
),
child: const Icon(
Icons.check,
color: Colors.white,
),
),
),
const SizedBox(
width: 5,
),
Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color: const Color(0xFFf44136),
borderRadius: BorderRadius.circular(20),
),
),
const SizedBox(
width: 5,
),
Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color: const Color(0xFF2295f6),
borderRadius: BorderRadius.circular(20),
),
),
const SizedBox(
width: 5,
),
Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color: Color(0xFF4daf52),
borderRadius: BorderRadius.circular(20),
),
),
],
),
)
],
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
"CLEAR ALL ",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
const SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(right: 50),
child: Row(
children: [
Padding(
padding: EdgeInsets.only(left: 50),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border:
Border.all(color: Colors.white, width: 3),
),
child: const Icon(
Icons.clear,
color: Colors.white,
),
),
),
],
),
),
]),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
"ERASER",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
const SizedBox(
height: 5,
),
Padding(
padding: const EdgeInsets.only(right: 50),
child: Row(children: [
Padding(
padding: const EdgeInsets.only(left: 60),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: Image.asset(
'assets/icon.png',
color: Colors.white,
),
),
),
]),
)
]),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
"UNDO ",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.only(right: 10),
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 20),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: const Icon(
Icons.undo,
color: Colors.white,
size: 45,
),
),
),
],
),
),
]),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
"REDO ",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.only(right: 100),
child: Row(children: [
Padding(
padding: const EdgeInsets.only(left: 0),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: const Padding(
padding: EdgeInsets.only(left: 50),
child: Icon(
Icons.redo,
color: Colors.white,
size: 50,
),
),
),
),
]),
)
]),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
"SAVE",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.only(right: 0),
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 0),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border:
Border.all(color: Colors.white, width: 3),
),
child: const Icon(
Icons.check,
color: Colors.white,
),
),
),
],
),
),
]),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 30),
child: Text(
"DO NOT SAVE",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.only(
left: 28,
),
child: Row(children: [
Padding(
padding: const EdgeInsets.only(
right: 10,
),
child: Container(
child: const Text(
"Cancel",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
)),
),
]),
)
]),
]),
],
)),
);
As for inner row's children, there will different screen-size devices. While you've used Row you can make it horizontal scrollable by wrapping Row with a scrollable widget like ListView. For theses few buttons, we can use SingleChildScrollView
body: Container(
height: 100,
width: MediaQuery.of(context).size.width,
color: const Color(0xFF722a8c),
child: ListView(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal, ///make sure to use horizontal
child: Row(children: [
Column(
Also you can try Wrap, or ListView (+with builder) widgets.
I'm trying to create a list of items with shadow, I also used from flutter_slidable and now this slidable covers my item shadow!!
As you can see in
first item is inside a slidable widget and the second item is a normal item!
action pane screenshot
this is item with slidable:
Slidable(
startActionPane: ActionPane(
extentRatio: .40,
motion: const ScrollMotion(),
children: <Widget>[
InkWell(
borderRadius: BorderRadius.circular(20),
onTap: () {},
child: Container(
width: 70,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.background,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Theme.of(context).shadowColor,
blurRadius: 15,
spreadRadius: 0,
offset: const Offset(0, 10),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.edit,
size: 20,
color: Theme.of(context).colorScheme.onSurface,
),
Text(
'Delete',
style: Theme.of(context).textTheme.subtitle1,
),
],
),
),
),
const SizedBox(width: 6),
InkWell(
borderRadius: BorderRadius.circular(20),
onTap: () {},
child: Container(
width: 70,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.background,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Theme.of(context).shadowColor,
blurRadius: 15,
spreadRadius: 0,
offset: const Offset(0, 10),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.delete,
size: 20,
color: Theme.of(context).colorScheme.onSurface,
),
Text(
'Edit',
style: Theme.of(context).textTheme.subtitle1,
),
],
),
),
),
],
),
child: InkWell(
borderRadius: BorderRadius.circular(20),
onTap: () {},
child: Container(
padding: const EdgeInsets.all(4),
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.background,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Theme.of(context).shadowColor,
blurRadius: 15,
spreadRadius: 0,
offset: const Offset(0, 10),
),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Row(
children: [
Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
border: Border.all(color: Theme.of(context).colorScheme.onSurface),
color: Theme.of(context).colorScheme.background,
borderRadius: BorderRadius.circular(16)
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset(
'assets/images/avatar/3.png',
width: 50,
height: 50,
fit: BoxFit.cover,
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'Abc Def',
style: Theme.of(context).textTheme.headline6,
),
],
),
),
],
)
),
Row(
children: [
Text(
'a',
style: TextStyle(
fontFamily: 'faMed',
fontSize: 12,
fontWeight: FontWeight.w600,
color: Theme.of(context).colorScheme.secondary,
),
),
Icon(
Icons.arrow_drop_down,
color: Theme.of(context).colorScheme.secondary,
size: 30,
),
],
),
],
),
),
),
),
and this is a normal item:
InkWell(
borderRadius: BorderRadius.circular(20),
onTap: () {},
child: Container(
padding: const EdgeInsets.all(4),
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.background,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Theme.of(context).shadowColor,
blurRadius: 15,
spreadRadius: 0,
offset: const Offset(0, 10),
),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Row(
children: [
Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
border: Border.all(color: Theme.of(context).colorScheme.onSurface),
color: Theme.of(context).colorScheme.background,
borderRadius: BorderRadius.circular(16)
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset(
'assets/images/avatar/3.png',
width: 50,
height: 50,
fit: BoxFit.cover,
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'Abc Def',
style: Theme.of(context).textTheme.headline6,
),
],
),
),
],
)
),
Row(
children: [
Text(
'a',
style: TextStyle(
fontFamily: 'faMed',
fontSize: 12,
fontWeight: FontWeight.w600,
color: Theme.of(context).colorScheme.secondary,
),
),
Icon(
Icons.arrow_drop_down,
color: Theme.of(context).colorScheme.secondary,
size: 30,
),
],
),
],
),
),
),
I tried to use a dismissible widget instead of slidable but that's not what I want!
A quick solution is using ClipRRect as Slidable's child. ActionPane is not getting enough space for its children, extend extentRatio:'s value. You can also remove this, it will paint the UI based on its need.
Slidable(
startActionPane: ActionPane(
extentRatio: .50,
//...
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: InkWell(
this problem was solved in the new release, you can see this issue.
I am new to flutter. I trying to design as in the image below. But I could not align the items inside the Row and could not give shape to like the layout below in the image. I have tried giving properties like mainAxisAlignment and crossAxisAlignment but could not get the expected result as in the image below.
Only I could able to get Image below.
I have implemented my code as follows:
Container(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Checkbox(
checkColor: Colors.white,
activeColor: Colors.green,
value: true,
onChanged: (value) {
print(value);
}),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.all(
Radius.circular(20))),
child: Image.network(
bannerWomenFashion[i],
height: 100,
width: 100,
fit: BoxFit.scaleDown,
)),
SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.start,
children: <Widget>[
Text(
"Rs 1200",
style: TextStyle(
color: CustomColor
.themeSecondary,
fontSize: 18,
fontWeight:
FontWeight.bold),
),
SizedBox(
height: 5,
),
Text(
"The Pursuit of Happiness",
style: TextStyle(
color: Colors.blueGrey,
fontSize: 20,
fontWeight:
FontWeight.bold),
),
SizedBox(
height: 5,
),
Text("ID: #254217",
style: cartBlueGreyStyle),
],
),
),
Expanded(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment:
CrossAxisAlignment.end,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.remove,
size: 25,
color: Colors.blueGrey,
),
Container(
width: 30,
height: 25,
decoration: BoxDecoration(
borderRadius:
BorderRadius
.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(
color:
Colors.grey,
spreadRadius: 2),
],
),
child: Center(
child: Text("1"))),
Icon(
Icons.add,
size: 25,
color: Colors.blueGrey,
),
],
),
],
)),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(20),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.white,
spreadRadius: 2),
],
),
child: Center(
child: Icon(Icons.clear,
color: Colors.blueGrey),
)),
],
),
],
),
);
Container(
padding: EdgeInsets.all(32.0),
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Stack(
overflow: Overflow.visible,
children: [
Container(
padding: EdgeInsets.all( 8.0),
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(12))),
child: Image.network(
'http://covertopia.com/wp-content/uploads/2015/05/000227_Alt.jpg'
/*bannerWomenFashion[i]*/,
height: 100,
fit: BoxFit.scaleDown,
)),
Positioned(
top: -12,
left: -12,
child: Container(
width: 32,
height: 32,
decoration: BoxDecoration(color: Colors.green, borderRadius: BorderRadius.all(Radius.circular(12))),
child: Checkbox(
checkColor: Colors.white,
activeColor: Colors.green,
value: true,
onChanged: (value) {
print(value);
}),
),
)
],
),
SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Rs 1200",
style: TextStyle(
color: Colors.red /*CustomColor
.themeSecondary*/
,
fontSize: 18,
fontWeight: FontWeight.bold),
),
SizedBox(height: 10,),
Expanded(
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"The Pursuit of Happiness",
style: TextStyle(color: Colors.blueGrey, fontSize: 20, fontWeight: FontWeight.bold),
),
),
),
SizedBox(height: 10,),
Row(
children: [
Text("ID: #254217", style: TextStyle(color: Colors.grey, fontWeight: FontWeight.bold) /*cartBlueGreyStyle*/),
Spacer(),
Row(
children: <Widget>[
Icon(
Icons.remove,
size: 25,
color: Colors.blueGrey,
),
Container(
width: 30,
height: 25,
margin: EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.blueGrey.withOpacity(0.1), spreadRadius: 2),
],
),
child: Center(child: Text("1"))),
Icon(
Icons.add,
size: 25,
color: Colors.blueGrey,
),
],
)
],
),
],
),
),
Container(
width: 30,
height: 30,
margin: EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.white, spreadRadius: 2),
],
),
child: Center(
child: Icon(Icons.clear, color: Colors.blueGrey,size: 16,),
)),
],
),
),
);