I'm trying to design my custom view and there's one thing that's not clear to me, when I try to pass my button with a white background, I get a black color and I don't understand why, everyone can explain it to me?
my code :
Expanded(
flex: 3,
child: Container(
color: this.backgroundColorBox,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Center(
child: SvgPicture.asset(
this.iconPath,
color: Colors.white,
height: 150,
width: 150,
),
),
flex: 2,
),
Expanded(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: Text(
this.textBox,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25,
color: Color.fromRGBO(0, 35, 63, 0.5)
),
),
),
ButtonTheme(
minWidth: 180,
height: 50,
child: RaisedButton(
color: this.backgroundColorButton,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Text(
this.textButton,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25,
color: this.textColorButton
),
),
onPressed: null,
),
)
]
),
),
flex: 2,
),
]
),
)
);
What is the real problem?
whenever you leave the onPressed property as null the button will be in disabled state so you should provide a function to your button onPressed property to see it in it's active state.
You have to define the color inside ButtonTheme also with parameter "buttonColor" as Colors.white.
Related
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.
I made some container, there is 2 container in one row. i try to make rounded border in each container using boxdecoration but seems like it cant place on here so i removed it. so anyone can help me to solve this.
and another question, how to make width margin in a column?i want to add a bit space on left inside column, look into 'image what i want'.
image from this code ||
image what i want
Container(
margin: EdgeInsets.only(top: 22),
height: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
width: 140,
child: Material(
color: kMainColor, // button color
child: InkWell(
splashColor: Colors.lightBlue[100], // splash color
onTap: () {}, // button pressed
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SvgPicture.asset(
'assets/icons/leaf.svg',
height: 30,
width: 30,
color: Colors.white,
),
SizedBox(height: 10),
// icon
Text("Penanaman",
style: GoogleFonts.roboto(
fontSize: 17,
color: Colors.white,
)), // text
],
),
),
),
),
Container(
width: 140,
child: Material(
color: kMainColor, // button color
child: InkWell(
splashColor: Colors.lightBlue[100], // splash color
onTap: () {}, // button pressed
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SvgPicture.asset(
'assets/icons/bug.svg',
height: 30,
width: 30,
color: Colors.white,
),
SizedBox(height: 10),
Text("Penyakit & Hama",
style: GoogleFonts.roboto(
fontSize: 17,
color: Colors.white,
)), // text
],
),
),
),
),
],
),
)
Have you looked into Card? Try wrapping each container with Card:
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
child: Container(...)
)
How can I achieve this?. I have tried customizing ExpansionTile but not able to get similar effects on expansion and collapse. Mainly the prefix icon is bigger in size and so the expandable text is not close to the date. Also, the suffix icon for expanding/collapsing not fully covered with the background color.
I am also attaching an image that I have tried. I have used https://pub.dev/packages/expandable#-readme-tab- to achieve a similar effect but no luck.
I am really stuck at this place and want any kind of help.
Your help will be appreciated.
Thanks.
Just implemented, try this:
ListView.builder(
itemCount: 20,
itemBuilder: (context, index) {
return ExpandableNotifier(
child: Card(
elevation: 4,
child: Expandable(
collapsed: Container(
width: MediaQuery.of(context).size.width,
height: 105,
child: ExpandableButton(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10),
child: ClipOval(
child: Container(
height: 80,
width: 80,
color: Colors.yellow,
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Welkom bij Haaer',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.bold,
),
),
Text(
'2019/06/01 11:04',
style: TextStyle(
color: Colors.grey,
fontSize: 12.0,
),
),
Text(
'blablablablablablablablablablablablablablablablablablablablablabla'
'blablablablablablablablablablablablablablablablablablablablablabla'
'blablablablablablablablablablablablablablablablablablablablablabla',
softWrap: true,
overflow: TextOverflow.ellipsis,
maxLines: 2,
),
],
),
),
),
Container(
color: Colors.yellow,
width: 30,
height: 105,
child: Icon(
Icons.keyboard_arrow_right,
color: Colors.white,
),
),
],
),
),
),
expanded: Container(
height: 200,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10),
child: ClipOval(
child: Container(
height: 80,
width: 80,
color: Colors.purple,
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Welkom bij Haaer',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.bold,
),
),
Text(
'2019/06/01 11:04',
style: TextStyle(
color: Colors.grey,
fontSize: 12.0,
),
),
Text(
'blablablablablablablablablablablablablablablablablablablablablabla'
'blablablablablablablablablablablablablablablablablablablablablabla'
'blablablablablablablablablablablablablablablablablablablablablabla',
softWrap: true,
),
SizedBox(
height: 5,
),
Container(
width: 80,
height: 20,
child: RaisedButton(
padding: EdgeInsets.all(0),
color: Colors.purple,
child: Text('show'),
onPressed: () {},
),
),
],
),
),
),
ExpandableButton(
child: Container(
color: Colors.purple,
width: 30,
height: 200,
child: Icon(
Icons.keyboard_arrow_down,
color: Colors.white,
),
),
),
],
),
),
),
),
);
},
),
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.
I am facing the problem
If two widgets added in a column, there is space between the widgets . I need to remove the space between them. how to acheive it.
Container(height: 50,
width: 50,
color: Colors.grey,
child: Column(mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Flexible(flex: 2,
child: Container(color: Colors.indigo,
child: SizedBox(child: Icon(
Icons.filter_list, color: Colors.white,),))),
Flexible( flex:1, child:
Text('5',style: TextStyle(color: Colors.black),)
),]));
The output should be
Actually i need this scenario also,
Any help is really appreciated
You can add a height of 0.6 to the text widget.
Container(
height: 50,
width: 50,
color: Colors.grey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 2,
child: Text(
'5',
style: TextStyle(color: Colors.black),
),
),
Flexible(
flex: 1,
child: Text(
'5',
style: TextStyle(color: Colors.black, height: 0.6),
),
),
],
),
),
You can easily overlap two widgets using assorted_layout_widgets package with innerDistance argument:
return ColumnSuper(
innerDistance: -8,
children: <Widget>[
Text(
'5',
style: TextStyle(
color: Colors.black,
),
),
Icon(
Icons.filter_list,
color: Colors.blue,
),
]
);