I have a question that I have a column and in that column, I have 2 widgets:
Container
Column
I want this Container to be on the top of the screen and the Column should be in the centre of the screen.
What I have done is as follows:
Column(
children: [
Container(
margin: EdgeInsets.only(top: 10, right: 10, left: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Profile',
style: TextStyle(
color: Color(0xff23b92c),
fontSize: 20,
fontWeight: FontWeight.bold),
),
CircleAvatar(
backgroundColor: Color(0xff23b92c),
radius: 20,
child: Center(
child: IconButton(
padding: EdgeInsets.zero,
icon: Image.asset(
'assets/images/question.png',
width: 20,
height: 20,
)),
),
),
],
)),
Center(
child: Column(
children: [
Container(
child: Text(
'Your Name',
style: TextStyle(
color: Color.fromARGB(100, 100, 100, 100)
.withOpacity(1.0),
fontSize: 22,
fontWeight: FontWeight.w700),
),
),
Container(
child: Text(
'Email',
style: TextStyle(
color: Color.fromARGB(100, 100, 100, 100)
.withOpacity(1.0),
fontSize: 22,
fontWeight: FontWeight.w700),
),
),
Container(
margin: EdgeInsets.only(top: 15),
child: Text(
'Phone Number',
style: TextStyle(
color: Color.fromARGB(100, 100, 100, 100)
.withOpacity(1.0),
fontSize: 18,
fontWeight: FontWeight.w500),
),
),
Container(
margin: EdgeInsets.only(top: 15),
child: Text(
'Address Line 1',
style: TextStyle(
color: Color.fromARGB(100, 100, 100, 100)
.withOpacity(1.0),
fontSize: 18,
fontWeight: FontWeight.w500),
),
),
Container(
child: Text(
'Address Line 2',
style: TextStyle(
color: Color.fromARGB(100, 100, 100, 100)
.withOpacity(1.0),
fontSize: 18,
fontWeight: FontWeight.w500),
),
),
Container(
child: Text(
'City, State Zip',
style: TextStyle(
color: Color.fromARGB(100, 100, 100, 100)
.withOpacity(1.0),
fontSize: 18,
fontWeight: FontWeight.w500),
),
),
Container(
margin: EdgeInsets.only(top: 20),
child: Text(
'Edit Profile',
style: TextStyle(
color:
Color.fromARGB(100, 97, 196, 101).withOpacity(1.0),
fontSize: 13,
),
),
),
Container(
margin: EdgeInsets.only(top: 20),
child: Text(
'Up-to-date name and contact details\nare necessary to receive prizes won.',
style: TextStyle(
color:
Color.fromARGB(100, 100, 100, 100).withOpacity(1.0),
fontSize: 15,
),
),
),
],
),
),
],
),
With this code, I have achieved the following screenshot
now what I want to do is that the whole column with the text YOUR NAME, EMAIL, Phone Number etc. should be in the centre and the profile and the question mark should be on the top.
Please help me out how to do this or is there is any other better way other than this code?
Thanks
Consider using stack. The first child would be The Container and the second(upper) child would be the Column with mainAlignment to center.
Stack(
children: [
Positioned(
top: 0,
left: 0,
right: 0,
child: Container(
child: Text('Your Icons'),
),
),
Positioned.fill(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Your name'),
Text('Email'),
Text('Phone'),
],
),
)
],
)
Another way would be using a parent column with expanded first child and spacer as last one
Column(
children: [
Expanded(
child: Container(
child: Text('Your Icons'),
),
),
Column(
children: [
Text('Your name'),
Text('Email'),
Text('Phone'),
],
),
Spacer(),
],
)
Use 3 widgets in your column. and make mainAxisAlignment:MainAxisAlignment.spaceEvenly or spaceBetween to give equal space to all of three widgets. and make the last one as dummy. just like below
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly
children: [
Widget1(),
Widget2(),
SizedBox(height: 5),
],
)
in your case add the root column property mainAxisAlignment: MainAxisAlignment.spaceBetween and group both the collection top and center widget in Column() and add the last widget as dummy like SizedBox(height:8)
Related
I have two seperate text in an container and I need a icon to come right to this text and need to be center aligned to both this text. I dont know how to make this happen. Am sorry If this question is already asked but I can't that question. Help me to understand how that works.
You can see in the buttom i have both price text and an cart icon centered to them in right. How can I achieve this please help me.
I will share the code for the rest . If you can make the code better that will help too...
Container(
width: 430,
height: 350,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
border: Border.all(color: Colors.black45),
),
child: Column(
children: [
const SizedBox(height: 40),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
SizedBox(width: 20),
Text("Blue Star 1.5 ton 5 star inverter AC",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500
),)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
SizedBox(width: 20),
Text("Blue Star",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.normal
),
),
]),
Image.asset("assets/air_conditioner.png",
height:180,
width: 340,),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const SizedBox(width: 30,),
const Text("₹54,000 (10% OFF)",
style: TextStyle(
color: Colors.redAccent,
fontSize: 17,
fontWeight: FontWeight.w500
),),
IconButton(
onPressed: (){},
icon: const Icon(Icons.shopping_cart))
],
),
const SizedBox(height: 05),
Row(
children: [
const SizedBox(width: 35),
const Text("₹60,000",
style: TextStyle(
decoration: TextDecoration.lineThrough,
fontSize: 14
)),
],
)
],
)
),
I've edited your code:
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
border: Border.all(color: Colors.black45),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20,vertical: 30),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
const Text("Blue Star 1.5 ton 5 star inverter AC",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500
),),
const SizedBox(height: 10,),
const Text("Blue Star",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.normal
),
),
const SizedBox(height: 10,),
Center(
child: Image.asset("assets/air_conditioner.png",
height:180,
width: 340,),
),
const SizedBox(height: 10,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text("₹54,000 (10% OFF)",
style: TextStyle(
color: Colors.redAccent,
fontSize: 17,
fontWeight: FontWeight.w500
),),
Text("₹60,000",
style: TextStyle(
decoration: TextDecoration.lineThrough,
fontSize: 14
)),
],
),
IconButton(
onPressed: (){},
icon: const Icon(Icons.shopping_cart))
],
),
],
),
)
)
some notes:
try to use padding instead of SizedBox for setting padding sides. because SizedBox is using for setting spaces between something ...
crossAxisAlignment default is center if you want to make it start you should use CrossAxisAlignment.start
do not use static sizes for Container if it is not force let it fill itself
mainAxisSize default is max but here you should use MainAxisSize.min to let it use its real size of the widget.
if you had any questions i'm here.
happy coding...
Container(
width: 430,
height: 350,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
border: Border.all(color: Colors.black45),
),
child: Column(
children: [
const SizedBox(height: 40),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
SizedBox(width: 20),
Text("Blue Star 1.5 ton 5 star inverter AC",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500
),)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
SizedBox(width: 20),
Text("Blue Star",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.normal
),
),
]),
Image.asset("assets/air_conditioner.png",
height:180,
width: 340,),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const SizedBox(width: 30,),
const Text("₹54,000 (10% OFF)",
style: TextStyle(
color: Colors.redAccent,
fontSize: 17,
fontWeight: FontWeight.w500
),),
IconButton(
onPressed: (){},
icon: const Icon(Icons.shopping_cart))
],
),
const SizedBox(height: 05),
Row(
children: [
const SizedBox(width: 35),
const Text("₹60,000",
style: TextStyle(
decoration: TextDecoration.lineThrough,
fontSize: 14
)),
IconButton(
onPressed: (){},
icon: const Icon(Icons.shopping_cart))
],
),
]),
),
appBar: AppBar(toolbarHeight: 100,
automaticallyImplyLeading: false,
elevation: 10,
backgroundColor: Colors.white,
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height:30),
Row(
children: [
Icon(Icons.home_rounded,
color: HexColor('#24591C'),),
Text('Home',
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.w700
),),
Icon(Icons.arrow_drop_down_rounded,
size: 30,
color: HexColor('#444444')),
],
),
Container(
padding: EdgeInsets.only(left: 2),
child: Text('B Block, NCC Aster Park...',
style: TextStyle(
color: HexColor('#999999'),
fontSize: 11
),),
)
],
),
I need the dropdown to show up when clicking on the 'home' text which I have declared under the title of the appbar. I am unable to figure it out.
You can use ExpansionTile widget for expandable areas.
For example
ExpansionTile(
title: Row(
children: [
Icon(Icons.home_rounded,
color: HexColor('#24591C'),),
Text('Home',
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.w700
),),
Icon(Icons.arrow_drop_down_rounded,
size: 30,
color: HexColor('#444444')),
],
),
children: [
// the widgets you want to show on click
],
),
I have this flutter app with a Scaffold in which i have put the following container.
This container contains the timer's minute and seconds, and two buttons.
I am trying to avoid the Text widget to re-centers when Timer is active. This seems to happens because the Text widget changes size when a different digit is showed.
I tried to wrap the Text widget with an Expanded widget, but it didn't solve the issue. How can i solve this?
Container(
height: size.height * 0.40,
width: size.width * 0.80,
decoration: BoxDecoration(
color: Color(0xFFf4f6fa),
borderRadius: BorderRadius.circular(29.5)),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Text(
"${f.format(_minutes)}:${f.format(_seconds)}",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 80,
color: Color(0xff7165E3),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
// STOP BUTTON
Container(
decoration: BoxDecoration(
color: Colors.grey[800],
shape: BoxShape.circle,
),
height: 90,
width: 90,
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
Colors.grey[800]),
shape: MaterialStateProperty.all(
CircleBorder()),
),
onPressed: () {
setState(() {
_stopTimer();
});
},
child: Container(
alignment: Alignment.center,
child: Text(
"Annulla",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
),
// START BUTTON
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
),
height: 90,
width: 90,
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
Color(0xff7165E3)),
shape: MaterialStateProperty.all(
CircleBorder()),
),
onPressed: () {
_startTimer();
},
child: Container(
alignment: Alignment.center,
child: Text(
"Avvia",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
),
],
),
],
),
),
This happens because of the font you are using.
The font you use dose not have negative space. Try to use some font with negative space adjusted. I Roboto Mono is a font that have negative space.
In the above pic the characters take equal space.
pubspec.yaml
google_fonts: ^2.1.0
sport_screen.dart
Text(
"${f.format(_minutes)}:${f.format(_seconds)}",
textAlign: TextAlign.center,
style: GoogleFonts.robotoMono(
fontSize: 80.0,
color: const Color(0xff7165E3),
),
)
refer here for more about fonts and negative space.
Default Font
Monospace Font
You can use FontFeature.tabularFigures()
Example:
Text(
timerText,
style: TextStyle(
fontFeatures: [
FontFeature.tabularFigures(),
],
),
),
I'm trying to replicate a flutter design that looks like this, I was able to achieve something similar by using Listtile widget, my only issue was that the leading icon didn't align vertically with the title. Please is there any other way to achieve this? I tried using a row widget but the multiple line text won't fit into the screen.
You can try this code
Container(
color: Colors.white,
padding: const EdgeInsets.all(10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
),
child: Icon(
Icons.message,
color: Colors.white,
),
),
SizedBox(width: 10,),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Message", style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16
),),
Text("How to create row with multiple lines in flutter How to create row with multiple lines in flutter")
],
),
),
],
),
),
Result:-
Please let me know if it work.
You can try as well as my code.
Widget ListItem({
String imageUrl,
String text,
String caption,
double imageSize = 50,
double horizontalSpacing = 15,
double verticalspacing = 20,
bool showDetailIndicatorIcon = true,
GestureTapCallback onTap,
}) {
return InkWell(
onTap: onTap,
child: Container(
margin: EdgeInsets.only(top: 2),
padding: EdgeInsets.symmetric(
horizontal: horizontalSpacing, vertical: verticalspacing),
child: Row(
children: [
ClipRRect(
child: Image.network(
imageUrl,
fit: BoxFit.cover,
height: imageSize,
width: imageSize,
),
borderRadius: BorderRadius.circular(imageSize / 2),
),
Expanded(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text(
text,
style: TextStyle(
color: ColorRes.lightWhite,
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
SizedBox(height: 5),
Text(
caption,
style: TextStyle(
color: ColorRes.grey,
fontSize: 12,
fontWeight: FontWeight.normal,
),
maxLines: 3,
),
],
),
),
),
],
),
),
);
}
I hope it's work. Please let me know.
Example for the structure of the page:
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
flex: 3,
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 8, 8, 2),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
_block1(),
_block2(),
],
),
),
),
Expanded(
flex: 2,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
child: _block3(),
)
),
Expanded(
flex: 3,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
child: _block4(),
)
),
Expanded(
flex: 2,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
child: _block5(),
)
),
],
),
),
);
}
Example of one of the small container widgets to be loaded
Widget _block1() {
return Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey, width: 2),
borderRadius: BorderRadius.circular(0.0),
),
margin: EdgeInsets.all(4.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'headline',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 24,
color: Colors.black,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 12,
),
Text(
'text',
textAlign: TextAlign.start,
style: TextStyle(fontSize: 20, color: Colors.black),
),
SizedBox(
height: 4,
),
Text(
'text',
textAlign: TextAlign.start,
style: TextStyle(fontSize: 20, color: Colors.black),
),
SizedBox(
height: 4,
),
Text(
'text',
textAlign: TextAlign.start,
style: TextStyle(fontSize: 20, color: Colors.black),
),
SizedBox(
height: 4,
),
Text(
'text',
textAlign: TextAlign.start,
style: TextStyle(fontSize: 20, color: Colors.black),
),
SizedBox(
height: 4,
),
Text(
'text',
textAlign: TextAlign.start,
style: TextStyle(fontSize: 20, color: Colors.black),
),
SizedBox(
height: 4,
),
Text(
'text',
textAlign: TextAlign.start,
style: TextStyle(fontSize: 20, color: Colors.black),
),
SizedBox(
height: 4,
),
Text(
'text',
textAlign: TextAlign.start,
style: TextStyle(fontSize: 20, color: Colors.black),
),
SizedBox(
height: 4,
),
Text(
'text',
textAlign: TextAlign.start,
style: TextStyle(fontSize: 20, color: Colors.black),
),
],
),
),
);
}
Example of one of the large container:
Widget _block3() {
return Container(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey, width: 2),
borderRadius: BorderRadius.circular(0.0),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'another container for displaying different contents',
textAlign: TextAlign.start,
style: TextStyle(fontSize: 20, color: Colors.black),),
])
);
}
Android tablet Nexus 10
but on iOS iPad I get overflowed errors
iOS iPad 8th generation
Is there a way to adjust the height and width of the containers so that they look the same on Android and iOS and do not cause overflowed errors without the aid of "SingleChildScrollView"?
Wrap each text in the _bloc1 widget with Expanded and remove the SizeBox widgets. Example, for the individual fixed SizedBox heights in your _block1 widget, they will eventually add up and cause overflow error when the total size becomes larger than available space. Also note that if your widgets are too many, things will still overflow.
Another possible solution is using FittedBox to resize your texts or contents based on available width and height.