Related
I need to do something like this but I don't know what I can do.
When I try to move with Align, the icon doesn't move:
I tried this:
Widget AreaProfil(){
return Column(
children: [
Container(
margin: const EdgeInsets.only(left: 10.0),
padding: const EdgeInsets.only(top: 10.0, ),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: Card(
child: Container(
child: Row(
children: [
const Text(
"Mon Profil",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
Align(
alignment: Alignment.centerRight,
child: Row(
children: const [
Icon(Icons.edit),
],
),
),
]
)
),
)
)
]
);
}
The result of this don't work and all the Icon rest on the left.
If you want to have a gap between several widgets and MainAxisAlignment.spaceBetween is not enough for you, you can also use Spacer or Expanded to create such a gap.
Widget AreaProfil(){
return Column(
children: [
Container(
margin: const EdgeInsets.only(left: 10.0),
padding: const EdgeInsets.only(top: 10.0, ),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: Card(
child: Row(
children: [
const Text(
"Mon Profil",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
Spacer(),
Icon(Icons.edit),
Icon(Icons.edit),
),
],
),
)
)
]
);
}
Need to specify width for parent group
this is example
Widget AreaProfil(BuildContext context) {
var width = MediaQuery.of(context).size.width;
return Column(children: [
Container(
width: width,
margin: const EdgeInsets.only(left: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsets.only(
top: 10.0,
),
child: Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
"Mon Profil",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
Row(
children: [
Align(
alignment: Alignment.centerRight,
child: Row(
children: const [
Icon(Icons.edit),
],
),
),
Align(
alignment: Alignment.centerRight,
child: Row(
children: const [
Icon(Icons.edit),
],
),
)
],
)
])),
))
]);
}
I'm new to Flutter and have been trying to clone a screen that requires a scroll architecture.Here is the link of the screen that i'm working on. https://i.stack.imgur.com/1OW2b.pngThe code is as below.PS: Ignore the fields that are incomplete. As soon as I get the scroll view, i'll add the functionalities afterwards.
Scaffold(
body: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(15.0, 40.0, 15.0, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: const <Widget>[
Icon(Icons.menu),
Image(), //Asset image
],
),
Row(
children: <Widget>[
const Icon(Icons.notifications_none),
const SizedBox(width: 27.0),
CircleAvatar(
child: Text("JM"),
),
],
)
],
),
Row(
children: const <Widget>[
Icon(Icons.arrow_back),
SizedBox(width: 20.0),
Text("Public page"),
],
),
const SizedBox(
height: 20.0,
),
const Text(" Please fill the form following the proper order."),
const SizedBox(height: 10.0),
OverviewWidget(), //Widget with lots of TextFormField
SizedBox(height: 10.0),
DescriptionWidget(), //Widget with lots of TextFormField
],
),
),
Align([enter image description here][1]
alignment: Alignment.bottomCenter,
child: GestureDetector(
onTap: () {
print("Hello");
},
child: Container(
height: 130.0,
width: double.infinity,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.shade400,
blurRadius: 10,
spreadRadius: 1,
)
],
),
child: Container(
margin: const EdgeInsets.only(top: 10.0, bottom: 30.0),
decoration: BoxDecoration(
color: Colors.green.shade400,
borderRadius: BorderRadius.circular(35),
),
child: const Padding(
padding: EdgeInsets.symmetric(
vertical: 15.0,
horizontal: 150.0,
),
child: Text(
"Save",
style: TextStyle(
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.w600),
),
),
),
),
),
),
],
),
);
So far, i've only created the Overview and Description widgets and i'm already getting RenderFlex overflow error. I tried wrapping the very first Column widget with a SingleChildScrollView widget but it can be noticed that the Save button at the bottom should stay fixed. I tried wrapping the whole widget with Stack widget instead of a Column widget but it didn't help either. I also used ListView widget but got the same results.What shall I do to achieve this view?
I guess you had all the elements but did not quite manage to use them as needed.
Your screen is composed of two important layout:
A stack (containing a button on top of a scrollable widget)
The scrollable widget
The stack has to be a stack, the scrollable can be anything but in your case SingleChildScrollView+Column seems the best choice.
Here is the concrete implementation:
Scaffold(
body: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(15.0, 40.0, 15.0, 0),
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(bottom: 100.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.menu),
Container(
height: 100,
width: 100,
color: Colors.redAccent,
),
//Asset image
],
),
Row(
children: <Widget>[
const Icon(Icons.notifications_none),
const SizedBox(width: 27.0),
CircleAvatar(
child: Text("JM"),
),
],
)
],
),
Row(
children: const <Widget>[
Icon(Icons.arrow_back),
SizedBox(width: 20.0),
Text("Public page"),
],
),
const SizedBox(
height: 20.0,
),
const Text(" Please fill the form following the proper order."),
const SizedBox(height: 10.0),
Container(
height: 400,
color: Colors.blueAccent,
), //Widget with lots of TextFormField
SizedBox(height: 10.0),
Container(
height: 400,
color: Colors.greenAccent,
), //Widget with lots of TextFormField
],
),
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: GestureDetector(
onTap: () {
print("Hello");
},
child: Container(
height: 130.0,
width: double.infinity,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.shade400,
blurRadius: 10,
spreadRadius: 1,
)
],
),
child: Container(
margin: const EdgeInsets.only(top: 10.0, bottom: 30.0),
decoration: BoxDecoration(
color: Colors.green.shade400,
borderRadius: BorderRadius.circular(35),
),
child: const Padding(
padding: EdgeInsets.symmetric(
vertical: 15.0,
horizontal: 150.0,
),
child: Text(
"Save",
style: TextStyle(
color: Colors.white, fontSize: 17, fontWeight: FontWeight.w600),
),
),
),
),
),
),
],
),
)
Note that you have to put a bottom padding inside the SingleChildScrollView to take into account the button. This is fine in your case since the button has a static height. However if you need something more fancy you might want to check How to create a scroll view with fixed footer with Flutter? as #Csisanyi suggested
Consider wrapping the Column with an Expanded widget
You can also check out this flutter doc. It addresses this common issue in detail.
https://flutter.dev/docs/testing/common-errors
Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(15.0, 40.0, 15.0, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.menu),
// Image(), //Asset image
Image.asset(
'assets/ocean.jpg',
height: kToolbarHeight,
/// make sure of image height
fit: BoxFit.fitHeight,
),
],
),
Row(
children: <Widget>[
const Icon(Icons.notifications_none),
const SizedBox(width: 27.0),
CircleAvatar(
child: Text("JM"),
),
],
)
],
),
Row(
children: const <Widget>[
Icon(Icons.arrow_back),
SizedBox(width: 20.0),
Text("Public page"),
],
),
const SizedBox(
height: 20.0,
),
const Text(
" Please fill the form following the proper order."),
const SizedBox(height: 10.0),
//todo: OverviewWidget(), //Widget with lots of TextFormField
...List.generate(22, (index) {
return TextField(
decoration: InputDecoration(hintText: "1st $index"),
);
}),
SizedBox(height: 10.0),
//todo: DescriptionWidget(), //Widget with lots of TextFormField
...List.generate(22, (index) {
return TextField(
decoration: InputDecoration(hintText: "2st $index"),
);
}),
],
),
),
Align(
alignment: Alignment.bottomCenter,
child: GestureDetector(
onTap: () {
print("Hello");
},
child: Container(
height: 130.0,
width: double.infinity,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.shade400,
blurRadius: 10,
spreadRadius: 1,
)
],
),
child: Container(
margin: const EdgeInsets.only(top: 10.0, bottom: 30.0),
decoration: BoxDecoration(
color: Colors.green.shade400,
borderRadius: BorderRadius.circular(35),
),
child: const Padding(
padding: EdgeInsets.symmetric(
vertical: 15.0,
horizontal: 150.0,
),
child: Text(
"Save",
style: TextStyle(
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.w600),
),
),
),
),
),
),
],
),
),
),
Consider this UI:
Code:
Widget shopHeader(var shopName, var shopAddress){
return Container(
height: 200,
margin: const EdgeInsets.all(10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
padding: const EdgeInsets.all(1.0),
child: const Icon(Icons.home, color: Colors.black),
decoration: const BoxDecoration(
color: Colors.grey, // border color
shape: BoxShape.circle,
),
),
const SizedBox(
width: 10,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
shopName,
style: TextStyle(fontSize: 17),
),
Text(
shopAddress,
style: TextStyle(fontSize: 14, color:Colors.black38),
),
Padding(
padding: EdgeInsets.only(left:0.0, right:0.0, top:20.0, bottom:0.0),
child: SizedBox(
width: 150,
child: ElevatedButton(
child: Text('Chat'),
onPressed: () {},
))
)
],
),
],
),
);
}
The icon on the left is too low. How to set it so it's align with "Awesome Shop" text?
On the topmost Row widget use the crossAxisAllignment property to CrossAxisAllignment.start.
I am building a crypto portfolio app in Flutter.
My main page has a Scaffold that has one column which contains 4 rows. The first three rows are similar in design, each starts with the logo of the crypto, the name and then the amount I hold. The problem is the amount I hold, Since it can be a very big or very small number the value has a wide range and I cannot seem to find a way to align or right justify the values. I want all the numbers to be aligned to the right side of the screen.
This is my code:
return
Scaffold
(
appBar: AppBar(
title: Text('Portfolio'),
),
backgroundColor: Colors.white,
body: Column( children: <Widget>[
Row(
children: [
Container(
margin: EdgeInsets.all(10.0),
child: new Image.asset(
'lib/assets/usdt_logo.png',
height: 60.0,
fit: BoxFit.cover,
),
),
Container(
margin: EdgeInsets.all(10.0),
child: new Text('USDT',
style: TextStyle(fontSize: 15),
),
),
Container(
alignment: Alignment.topRight,
margin: EdgeInsets.all(30.0),
child: new Text("${data['usdt']}",
style: TextStyle(fontSize: 25),
),
),
],
),
Row(//ROW 2
children: [
Container(
margin: EdgeInsets.all(10.0),
child: new Image.asset(
'lib/assets/bitcoin_logo.png',
height: 60.0,
fit: BoxFit.cover,
),
),
Container(
margin: EdgeInsets.all(10.0),
child: new Text('Bitcoin',
style: TextStyle(fontSize: 15),
),
),
Container(
margin: EdgeInsets.all(30.0),
alignment: Alignment.topRight,
child: new Text("${data['btc']}",
style: TextStyle(fontSize: 25),
),
),
],
),
Row(// ROW 3
children: [
Container(
margin: EdgeInsets.all(10.0),
child: new Image.asset(
'lib/assets/ethereum_logo.png',
height: 60.0,
fit: BoxFit.cover,
),
),
Container(
margin: EdgeInsets.all(10.0),
child: new Text('Ethereum',
style: TextStyle(fontSize: 15),
),
),
Container(
margin: EdgeInsets.all(30.0),
alignment: Alignment.topRight,
child: new Text("${data['eth']}",
style: TextStyle(fontSize: 25),
),
),
]
),
Row(// ROW 4
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.lightGreen, // background
onPrimary: Colors.white, // foreground
),
onPressed: ()
{
Navigator.pushNamed
(
context,
BuyPage.id,
);
},
child: Text('Buy'),
),ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.red, // background
onPrimary: Colors.white, // foreground
),
onPressed: () {
Navigator.pushNamed
(
context,
SellPage.id,
);
},
child: Text('Sell'),
),
]
),
],
)
);
This is what it currently looks like:
You can try this also
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Row(
children: [
Row(
children: [
Container(
height: 50,
width: 50,
margin: EdgeInsets.all(10.0),
color: Colors.red,
),
Container(
margin: EdgeInsets.all(10.0),
child: new Text(
'USDT',
style: TextStyle(fontSize: 15),
),
),
],
),
Expanded(
child: Container(
margin: EdgeInsets.all(30.0),
child: new Text(
"100.0",
textAlign: TextAlign.end,
style: TextStyle(fontSize: 25),
),
),
)
],
),
Row(
children: [
Row(
children: [
Container(
height: 50,
width: 50,
margin: EdgeInsets.all(10.0),
color: Colors.green,
),
Container(
margin: EdgeInsets.all(10.0),
child: new Text(
'Bitcoin',
style: TextStyle(fontSize: 15),
),
),
],
),
Expanded(
child: Container(
margin: EdgeInsets.all(30.0),
child: new Text(
"0.000000005",
textAlign: TextAlign.end,
style: TextStyle(fontSize: 25),
),
),
)
],
),
],
),
);
}
}
Add a Spacer between the last two Container of your Rows:
Row(// ROW 3
children: [
Container(
margin: EdgeInsets.all(10.0),
child: new Image.asset(
'lib/assets/ethereum_logo.png',
height: 60.0,
fit: BoxFit.cover,
),
),
Container(
margin: EdgeInsets.all(10.0),
child: new Text('Ethereum',
style: TextStyle(fontSize: 15),
),
),
Spacer(),//Spacer here
Container(
margin: EdgeInsets.all(30.0),
alignment: Alignment.topRight,
child: new Text("${data['eth']}",
style: TextStyle(fontSize: 25),
),
),
]
),
I have 3 container in a column i need to show first 2 container in middle and the 3rd in last on the screen
Something like this
my code is this
return Container(
child: Column(
children: <Widget>[
Container(
width: stackWidth * 0.75,
child: Image.asset('assets/logo.png')),
Container(
color: Color(0xffff4b4b),
child: Padding(
padding: EdgeInsets.all(5),
child: Text(
'Only for LunchBox management',
style: TextStyle(color: Colors.white, fontSize: 18),
)),
),
Container(
child: Padding(
padding: EdgeInsets.all(5),
child: Text(
'Powered by LunchBox KSA',
style: TextStyle(color: Colors.white, fontSize: 18),
)),
)
],
),
);
Its showing in column but i need to show first 2 container of column in middle and third in last
You can do the following:
return Container(
child: Column(
children: <Widget>[
const Spacer(), // <---- New
Container(
width: stackWidth * 0.75,
child: Image.asset('assets/logo.png')),
Container(
color: Color(0xffff4b4b),
child: Padding(
padding: EdgeInsets.all(5),
child: Text(
'Only for LunchBox management',
style: TextStyle(color: Colors.white, fontSize: 18),
)),
),
const Spacer(), // <---- New
Container(
child: Padding(
padding: EdgeInsets.all(5),
child: Text(
'Powered by LunchBox KSA',
style: TextStyle(color: Colors.white, fontSize: 18),
)),
)
],
),
);
Please use this!
return Scaffold(
backgroundColor: Colors.black,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.white,
width: MediaQuery.of(context).size.width * 0.75,
height: 80,
alignment: Alignment.center,
child: Text(
"YOUR LOGO",
style: Theme.of(context).textTheme.headline6,
),
),
SizedBox(height: 10),
Container(
color: Color(0xffff4b4b),
child: Padding(
padding: EdgeInsets.all(5),
child: Text(
'Only for LunchBox management',
style: TextStyle(color: Colors.white, fontSize: 18),
)),
),
],
),
),
bottomNavigationBar: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
child: Padding(
padding: EdgeInsets.all(20),
child: Text(
'Powered by LunchBox KSA',
style: TextStyle(color: Colors.white, fontSize: 18),
)),
),
],
),
);
\ **
it may be help you
**
body: Container(
child: Column(
children: [
Expanded(
flex: 0,
child: Container(
height: 80,
color: Colors.green,
)),
Expanded(
flex: 2,
child: Container(
height: 150,
color: Colors.white,
child: Image.asset("assets/github.png"),
)),
Expanded(
flex: 0,
child: Container(
height: 80,
color: Colors.deepOrange,
child: Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: EdgeInsets.all(8),
child: Text(
"Git Hub Power",
style: TextStyle(color: Colors.white, fontSize: 25),
))),
)),
],
),
),