How to expand column inside a row - flutter

I'm apologise to do this question again but I was reading similar ones and try to solve my problen and Iwasn't able to fix it.
I need my column(blue one) inside row expands vertically to and have the max heigth.
Here is my code
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Card(
color: Colors.amber,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: ListTile(
contentPadding: const EdgeInsets.symmetric(horizontal: 40),
title: AutoSizeText('text',
maxLines: 1,
style: Theme.of(context).textTheme.bodyText1),
subtitle: AutoSizeText(
'subText',
maxLines: 1,
style: Theme.of(context).textTheme.subtitle1!.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
fontWeight: FontWeight.w500),
),
)),
Column(
children: [
Container(
padding: EdgeInsets.zero,
margin: EdgeInsets.zero,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: Colors.blue,
),
child: FaIcon(
FontAwesomeIcons.locationDot,
),
),
],
),
],
),
),
],
),
Edited: Added expected output


remove following line from the column widget
mainAxisSize: MainAxisSize.min


Try below code and replace my widget code to your
Container(
height: 70,
color: Colors.amber,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: ListTile(
contentPadding: const EdgeInsets.symmetric(horizontal: 40),
title: Text('text',
maxLines: 1,
style: Theme.of(context).textTheme.bodyText1),
subtitle: Text(
'subText',
maxLines: 1,
style: Theme.of(context).textTheme.subtitle1!.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
fontWeight: FontWeight.w500),
),
),
),
Column(
children: [
Container(
height: 70,
width: 70,
padding: EdgeInsets.zero,
margin: EdgeInsets.zero,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: Colors.blue,
),
child: Icon(
Icons.add,
),
),
],
),
],
),
),
Result->

Related

How to align widget with Wrap

I want to align image with the text. I have modified the code to make it happen, but it doesn't show any change.
The image and the text is supposed to be like this.
Instead like the picture above, mine is like this.
Here is my code, I'm using Wrap btw:
Column(
children: [
SizedBox(
width: 350,
child: Wrap(
alignment: WrapAlignment.start,
direction: Axis.horizontal,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
SvgPicture.asset(
Assets.icons.image9.path,
fit: BoxFit.cover,
),
Wrap(
children: [
Padding(
padding: EdgeInsets.only(left: 15),
child: Text(
'Gekyume Onfroy',
style: heading3(
color: ColorName.neutralBackgroundWhite,
),
),
),
],
),
...
onSelected: (_) {},
child: SvgPicture.asset(Assets.icons.moreVertical.path),
),
),
SizedBox(width: 17),
Text(
'Access Code : 6666',
style: body1(color: ColorName.neutralBackgroundWhite),
),
],
),

Do not use wrap, as it will go horizontal to vertical, if mobile device does not have enough space. You have to use Rows and Column instead, check the bottom code for implementation and screenshot:
Container(
padding: const EdgeInsets.symmetric(horizontal: 14.0, vertical: 16.0),
decoration: BoxDecoration(
color: Colors.blue[900],
borderRadius: BorderRadius.circular(12)
),
// width: 350,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
height: 60,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
image: const DecorationImage(image: NetworkImage('https://cartoonavatar.com/wp-content/uploads/2021/12/02-300x300.png')),
),
width: 60,
),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: const [
Text('Gekyume Onfroy', maxLines:1, overflow: TextOverflow.ellipsis, style: TextStyle(fontSize: 20, color: Colors.white)),
Spacer(),
Text('Access Code : 6666', style: TextStyle(fontSize: 14, color: Colors.white),)
],
),
),
const SizedBox(width: 10),
IconButton(padding: EdgeInsets.zero, onPressed: () {}, icon: const Icon(Icons.more_vert, color: Colors.white))
],
),
),
const SizedBox(height: 10),
const Divider(color: Colors.white, thickness: 2,),
const SizedBox(height: 10),
Row(
children: [
const Icon(Icons.call, color: Colors.white),
const SizedBox(width: 10),
const Text('628-123-456-666', style: TextStyle(color: Colors.white)),
const Spacer(),
Container(
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: Colors.blue[300],
borderRadius: BorderRadius.circular(4)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text('Last Activity', style: TextStyle(color: Colors.white),),
Icon(Icons.navigate_next, color: Colors.white, size: 14,)
],
),
)
],
)
],
),
),

White space around dialog box | Flutter

i am trying to make an otp verification dialog in flutter but it keeps adding padding/ white space around the actual widget and I don't know how to remove it.
I've tried making the inset padding zero and content padding zero but it just changes the size of dialog box and does nothing with the difference in widget and dialog box.
Here's my code:
return AlertDialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
contentPadding: const EdgeInsets.all(0),
content: Container(
height: 244,
width: 380,
padding: EdgeInsets.symmetric(vertical: 12, horizontal: 30),
child: Card(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
flex: 30,
child : Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
flex: 66,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Verification",
// textAlign: TextAlign.left,
style: GoogleFonts.lato(
fontSize: 20,
fontWeight: FontWeight.w700,
color: Color(0xff4D4D4D)),
),
SizedBox(
height: 6,
),
Container(
padding: EdgeInsets.symmetric(horizontal: 15),
child: Text(
"We have just sent your phone an OTP, please enter below to verify",
textAlign: TextAlign.left,
style: GoogleFonts.lato(
fontSize: 7,
fontWeight: FontWeight.w500,
color: Color(0xff4D4D4D)),
),
),
],
)),
Expanded(
flex: 33,
child: Image.asset("assets/images/smartphone_verification.png",scale:5,))
],
),
),
// SizedBox(height: 100,),
// SizedBox(height: 50,),
Container(
width: 331,
height: 41,
child: ElevatedButton(
onPressed: (){},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Color(0xFF0E3C6E)),
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0),
// side: BorderSide(color: Colors.red)
))),
child: Text("Verify")),
)
],
),
),
),
);
It looks like this
while it should look like this

this padding you talk about come from this line:
padding: EdgeInsets.symmetric(vertical: 12, horizontal: 30),
in first container, and also put card elevation to 0.

The card widget has got elevation and padding too. Please remove the card widget and add
mainAxisSize : MainAxisSize.min

I have updated few things in code. Below is the updated source. I had to comment style to make it running. Please enable it in your sample.
AlertDialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(25.0)),
content: Container(
height: 170,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
flex: 6,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Verification",
// textAlign: TextAlign.left,
/* style: GoogleFonts.lato(
fontSize: 20,
fontWeight: FontWeight.w700,
color: Color(0xff4D4D4D)),*/
),
SizedBox(
height: 6,
),
Container(
padding: EdgeInsets.symmetric(
vertical: 8),
child: Text(
"We have just sent your phone an OTP, please enter below to verify",
textAlign: TextAlign.left,
/* style: GoogleFonts.lato(
fontSize: 7,
fontWeight: FontWeight.w500,
color: Color(0xff4D4D4D)),*/
),
),
],
)),
Expanded(
flex: 3,
child: Image.asset(
"assets/images/smartphone_verification.png",
scale: 5,
))
],
),
),
// SizedBox(height: 100,),
// SizedBox(height: 50,),
Container(
height: 41,
child: ElevatedButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
Color(0xFF0E3C6E)),
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40.0),
// side: BorderSide(color: Colors.red)
))),
child: Text("Verify")),
)
],
),
),
)
It will look like this.

Flutter - cannot use Flexible inside Padding for text wrapping purpose

In my flutter app, I want to have a card and four boxes aligned horizontally with equal width and height inside it. Code follows ;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
padding: EdgeInsets.fromLTRB(20,10,10,0),
height: 220,
width: double.maxFinite,
child: Card(
elevation: 5,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Container(
height:25,
color:Color(0xff6898F7),
child: Text('Online Pharmacy',
style:TextStyle(color: Color(0xffffffff)))
)
)
],
),
Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
height: 150,
padding: EdgeInsets.only(top:40),
color: Colors.red,
child: Column(
children: <Widget>[
Image.asset("images/medicine.jpg"),
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding:EdgeInsets.only(top:25),
child:Flexible(
child:Text('Medicine', style: TextStyle(color: Colors.white)),
),
),
],
),
),
],
)
),
),
],
),
],
),
The reason I used Flexible is that I wanted the text to be wrapped in multiple lines where necessary.
But I get this error :
════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following assertion was thrown building Container(padding: EdgeInsets(0.0, 40.0, 0.0, 0.0), bg: BoxDecoration(color: MaterialColor(primary value: Color(0xfff44336))), constraints: BoxConstraints(0.0<=w<=Infinity, h=150.0)):
Incorrect use of ParentDataWidget.
Flexible widgets must be placed directly inside Flex widgets.
Flexible(no depth, flex: 1, dirty) has a Flex ancestor, but there are other widgets between them:
- Padding(padding: EdgeInsets(0.0, 25.0, 0.0, 0.0))
These widgets cannot come between a Flexible and its Flex.
The ownership chain for the parent of the offending Flexible was:
Padding ← Row ← Center ← Column ← Padding ← DecoratedBox ← ConstrainedBox ← Container ← Expanded ← Row ← ⋯
So how can I wrap the text properly ? Without the wrapping issue, code works well.
EDIT:
My intended layout seems to be like the image below :
Edit2:
Let me give you a more precise idea about the layout:
Edit3:
After getting a solution ( see here ) in chat room from pskink , I had the following layout. See that the red marked part does not get the text aligned in a centered fashion. How to align text in a centered way ?

try textAlign: TextAlign.center, inside text Widget

Please try this...
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Card(
margin: EdgeInsets.all(10),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Online Pharmacy",
style: TextStyle(fontSize: 16, color: Colors.white),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
],
)
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Online Pharmacy",
style: TextStyle(fontSize: 16, color: Colors.white),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
],
)
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Online Pharmacy",
style: TextStyle(fontSize: 16, color: Colors.white),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
],
)
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Online Pharmacy",
style: TextStyle(fontSize: 16, color: Colors.white),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
],
)
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Online Pharmacy",
style: TextStyle(fontSize: 16, color: Colors.white),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
],
)
],
),
),
],
),
)));
}
Just copy paste code and see what happening...
May this will help you.

Padding(
padding: const EdgeInsets.all(8.0),
child: Material(
elevation: 5.0,
child: Container(
// height: 220,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.symmetric(horizontal: 8.0),
height: 25,
color: Color(0xff6898F7),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Online Pharmacy',
style: TextStyle(
color: Color(0xffffffff),
),
),
Text(
'your hidden text lol',
style: TextStyle(
color: Color(0xffffffff),
),
),
],
),
),
Container(
height: 150.0,
child: Row(
children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// you could use icon instead of image
// Container(
// height: 80,
// child: Image.asset(
// "images/medicine.jpg",
// fit: BoxFit.fill,
// ),
// ),
Icon(
Icons.touch_app,
size: 40.0,
),
SizedBox(height: 10.0),
Flexible(
child: Text(
'Browse Through Database',
textAlign: TextAlign.center,
))
],
),
),
),
Expanded(
child: Container(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// you could use icon instead of image
// Container(
// height: 80,
// child: Image.asset(
// "images/medicine.jpg",
// fit: BoxFit.fill,
// ),
// ),
Icon(
Icons.input,
size: 40.0,
),
SizedBox(height: 10.0),
Flexible(
child: Text(
'Type your own medicine',
textAlign: TextAlign.center,
))
],
),
),
),
Expanded(
child: Container(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// you could use icon instead of image
// Container(
// height: 80,
// child: Image.asset(
// "images/medicine.jpg",
// fit: BoxFit.fill,
// ),
// ),
Icon(
Icons.image,
size: 40.0,
),
SizedBox(height: 10.0),
Flexible(
child: Text(
'Picture of your prescription',
textAlign: TextAlign.center,
))
],
),
),
),
],
),
),
],
)),
),
)
That my approach to what you need:

flutter - vertically align button

Need to help to copy the layout on image below.
2 buttons with 50% width and padding/spacing in between.
I'm thinking also of using toggle button widget on it.
see my draft code below.
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
children: <Widget>[
Container(
color: Colors.green,
width: (MediaQuery.of(context).size.width) / 2.5,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
MdiIcons.account,
size: 18.0,
),
SizedBox(
width: 4.0,
),
Text(
"Client",
style: TextStyle(fontSize: 16),
)
],
)),
Container(
color: Colors.green,
width: (MediaQuery.of(context).size.width) / 2.5,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
MdiIcons.accountTie,
size: 18.0,
),
SizedBox(
width: 4.0,
),
Text(
"Host",
style: TextStyle(fontSize: 16),
)
],
)),
],
),
),

You can customize it,
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
children: <Widget>[
Expanded(
child: RaisedButton(
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
elevation: 1.5,
color: Colors.white,
padding: const EdgeInsets.all(16),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.developer_board),
SizedBox(height: 10),
Text("Experiences"),
],
),
),
),
SizedBox(width: 24),
Expanded(
child: RaisedButton(
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
elevation: 1.5,
color: Colors.white,
padding: const EdgeInsets.all(16),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.event),
SizedBox(height: 10),
Text("Events"),
],
),
),
),
],
),
),

Flutter align widget to centre and another to the right - impossible

I'm trying to do something which should be extremely simple but can't see how it is done.
I need to align the large text to the centre and the buttons to the right so it looks like image below:
With the code below the widgets are aligned left and right:
Container(
width: 300,
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colour.darkBlue, width: 2),
borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Centred', style: TextStyle(fontSize: 32)),
Text('24.6 %', style: TextStyle(fontSize: 48)),
],
),
Container(
margin: EdgeInsets.only(left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('BtnA', style: TextStyle(fontSize: 18)),
Text('BtnB', style: TextStyle(fontSize: 18)),
Text('BtnC', style: TextStyle(fontSize: 18)),
],
),
),
],
),
),
I tried the following method:
Container(
width: 300,
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colour.darkBlue, width: 2),
borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(child: Container()),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Centred', style: TextStyle(fontSize: 32)),
Text('24.6 %', style: TextStyle(fontSize: 48)),
],
),
),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('BtnA', style: TextStyle(fontSize: 18)),
Text('BtnB', style: TextStyle(fontSize: 18)),
Text('BtnC', style: TextStyle(fontSize: 18)),
],
),
),
),
],
),
),
But it resulted in this:
Not sure how or whether it can be done without manually setting a width for the container on the left which is clearly a far from ideal method. Flutter seems to desperately need float:right...

You was almost there. Just "Expanded" in the middle should be removed:
Container(
width: 300,
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent, width: 2),
borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(child: Container()),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Centred', style: TextStyle(fontSize: 32)),
Text('24.6 %', style: TextStyle(fontSize: 48)),
],
),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('BtnA', style: TextStyle(fontSize: 18)),
Text('BtnB', style: TextStyle(fontSize: 18)),
Text('BtnC', style: TextStyle(fontSize: 18)),
],
),
),
),
],
),
),

Try with ListTile Widget, I have made changes using ListTile, please check if it works for you
Center(
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.only(top: 10),
padding: EdgeInsets.all(15),
width: 300,
height: 150,
decoration: BoxDecoration(
border: Border.all(color: Colors.blue, width: 2),
borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
),
child: ListTile(
title: Text('Centred',
textAlign: TextAlign.center, style: TextStyle(fontSize: 30)),
subtitle: Text('24.6 %',
textAlign: TextAlign.center, style: TextStyle(fontSize: 48)),
trailing: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('BtnA', style: TextStyle(fontSize: 15)),
Text('BtnB', style: TextStyle(fontSize: 15)),
Text('BtnC', style: TextStyle(fontSize: 15)),
],
),
),
),
)

child: Center(
child: Container(
width: 300,
height: 150,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 2),
borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
),
child: Container(
child: Stack(
children: <Widget>[
Center(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
child: Text('Centred',
style: TextStyle(fontSize: 32)),
),
Flexible(
child: Text('24.6 %',
style: TextStyle(fontSize: 48)),
),
],
),
),
),
Align(
alignment: Alignment.centerRight,
child: Container(
margin: const EdgeInsets.only(right: 16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text('BtnA', style: TextStyle(fontSize: 15)),
Text('BtnB', style: TextStyle(fontSize: 15)),
Text('BtnC', style: TextStyle(fontSize: 15)),
],
),
),
)
],
),
),
),
),