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.
Related
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,)
],
),
)
],
)
],
),
),
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->
How do i make the login text and sign in text to start from a single margin rather than the alignment it is shown in the picture?
Here the text isnt being aligned from a single margin and has off placement between texts
Code for it:
mainAxisAlignment: MainAxisAlignment.start,
children: [
const SizedBox(
width: double.infinity,
height: 200,
),
const Divider(
thickness: 3,
color: Colors.white,
indent: 160,
endIndent: 160,
),
Container(
decoration: const BoxDecoration(
color: Color.fromRGBO(32, 32, 32, 1),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8),
topRight: Radius.circular(8),
),
),
width: double.infinity,
height: MediaQuery.of(context).size.height,
child: Align(
alignment: Alignment.topLeft,
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Column(
children: [
Text(
'Login',
textAlign: TextAlign.start,
style: GoogleFonts.inter(
textStyle: const TextStyle(
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold),
),
),
Text(
'Sign in to continue',
style: GoogleFonts.inter(
color: Color.fromRGBO(161, 161, 161, 1),
fontSize: 24,
fontWeight: FontWeight.w300),
)
],
),
)
],
),
),
),
],
),
Set the crossAxisAlignment property of the Column to start:
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
...]
)
Add CrossAxisAlignment.start to immediate parent column of text.
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start, //here
children: [
Text(
'Login',
),
Text(
'Sign in to continue',
)
],
),
)
Edit: should be crossAxisAlignment.
Set the mainAxisAlignment attribute for the Column:
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
...
I had implemented a column which has a padding of 16px horizontally, and a child container being one of the children. However, i wanted the whole container to be click-able so wrapped it with a TextButton, as a result its width shrunk somewhat, what can i do to restore it back to original while keeping the entire container as a Button?
Here is the code for the concerned widget:
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Column(
children: [
Row(
children: [
Text("Add an item",
style: TextStyle(
color: Colors.black,
fontSize: 34,
fontWeight: FontWeight.w700,
letterSpacing: -1.5)),
Expanded(child: SizedBox(width: 1))
],
),
SizedBox(height: 16),
TextButton(
child: Container(
width: double.infinity,
height: 460,
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.image_rounded,
color: Colors.grey.shade200,
),
],
),
),
onPressed: () {},
)
],
),
)
Replace the TextButton with GestureDetector, like:
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Column(
children: [
Row(
children: [
Text("Add an item",
style: TextStyle(
color: Colors.black,
fontSize: 34,
fontWeight: FontWeight.w700,
letterSpacing: -1.5)),
Expanded(child: SizedBox(width: 1))
],
),
SizedBox(height: 16),
GestureDetector(
child: Container(
width: double.infinity,
height: 460,
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.image_rounded,
color: Colors.grey.shade200,
),
],
),
),
onTap:(){}
)
],
),
)
it would look something like:
I am new to the flutter and recently wide coding I came to a scenario where I have to indecently align the elements in the row. I have 3 child elements lets call it A, B and C. My requirement is to to the A and B to the extreme left of the row and the element C to the extreme right.
Expectation:
My code:
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(''),
radius: 30,
),
SizedBox(
width: 10,
),
Flexible(
child: Text('name', overflow: TextOverflow.ellipsis,),
),
SizedBox(
width: 10,
),
Container(
child: ButtonTheme(
height: 25.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0)),
child: RaisedButton(
child: Text(
'Challenge',
style: TextStyle(color: Colors.white, fontSize: 12),
),
onPressed: () {},
),
),
),
],
),
But the output is coming like this:
When I tried using Spacer() the output comes like this:
Anyone can please help me with this. Thanks in advance.
wrap your text with Expanded widget and set your textAlign of your text widget to TextAlign.start like below code:
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(''),
radius: 30,
),
SizedBox(
width: 10,
),
Expanded(
child: Text(
'name',
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.start,
),
),
SizedBox(
width: 10,
),
Container(
child: ButtonTheme(
height: 25.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0)),
child: RaisedButton(
child: Text(
'Challenge',
style: TextStyle(color: Colors.white, fontSize: 12),
),
onPressed: () {},
),
),
),
],
),
Try this, it should work for you.
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(''),
radius: 30,
),
SizedBox(width: 10),
Expanded(
child: Text('name', align: TextAlign.start, overflow: TextOverflow.ellipsis),
),
SizedBox(width: 10),
Container(
child: ButtonTheme(
height: 25.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0)),
child: RaisedButton(
child: Text('Challenge', style: TextStyle(color: Colors.white, fontSize: 12)),
onPressed: () {},
)
)
)
]
)
You have to wrap your Text widget in an Expanded widget like the example below.
Try this, it works perfectly,
Check code below:
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(''),
radius: 30,
),
SizedBox(
width: 10,
),
Expanded(
// wrap your text widget with an Expanded widget
child: Text(
'name',
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.start,
),
),
SizedBox(
width: 10,
),
Container(
child: ButtonTheme(
height: 25.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0)),
child: RaisedButton(
child: Text(
'Challenge',
style: TextStyle(color: Colors.white, fontSize: 12),
),
onPressed: () {},
),
),
),
],
),
I hope this helps you.