Space between FlatButton in flutter - flutter

enter image description hereHello I am making an application where i need to maximize and minimise the screen.But i want to reduce space between 'A+'(i.e. maximising the screen) and 'A-'(i.e. minimising).I am attaching an image for better understanding.Thank you.
Here is the code:
return Scaffold(
appBar: AppBar(
title: Text(''),
backgroundColor: Color(0xFF125688),
actions: <Widget>[
FlatButton(
padding: EdgeInsets.all(0),
onPressed: null,
child: Text('A+',style: TextStyle(
fontSize: 22.0,fontWeight: FontWeight.bold,color: Colors.white
),)),
FlatButton(
padding: EdgeInsets.all(0),
onPressed: null,
child: Text('A-',style: TextStyle(
fontSize: 15.0,fontWeight: FontWeight.bold,color: Colors.white
),),
)
],
),


Use SizedBox
Scaffold(
appBar: AppBar(
title: Text(''),
titleSpacing: 10,
backgroundColor: Color(0xFF125688),
actions: <Widget>[
SizedBox(
width: 30,
child: FlatButton(
padding: EdgeInsets.all(0),
onPressed: null,
child: Text('A+',style: TextStyle(
fontSize: 22.0,fontWeight: FontWeight.bold,color: Colors.white
),))),
SizedBox(
width: 30,
child:FlatButton(
padding: EdgeInsets.all(0),
onPressed: null,
child: Text('A-',style: TextStyle(
fontSize: 15.0,fontWeight: FontWeight.bold,color: Colors.white
),),
))
],
))


Image of the Flatbutton:
Container(
decoration: new BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.blue, width: 1.0),
borderRadius: new BorderRadius.all(Radius.circular(3.0)),
),
width: double.infinity,
child: FlatButton(
padding: EdgeInsets.all(8.0),
onPressed: () {
// Write the function
},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Add a Note"),
Icon(
Icons.note_add,
color: Colors.blue,
),
],
),
),
),

Related

How can I change the bottom color of my drawer?

I have created my drawer. I have put the list tiles in a container and set the color of my container to white but the bottom of drawer still shows black. The widget is put in a separate class. I want the whole drawer to white except the drawer header which is in yellow. How can I solve it.
Here is code snippet:
class NavigationDrawerWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Drawer(
child: Column(
children: <Widget>[
Container(
width: double.infinity,
padding: EdgeInsets.only(
top: 50,
bottom: 50,
),
color: Colors.yellow,
child: Center(
child: Column(
children: [
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage('images/profile.png'),
),
),
),
SizedBox(
height: 20,
),
Text(
'Usama Tahir',
style: TextStyle(
color: Colors.black,
),
)
],
),
),
),
Container(
// color: Colors.white,
decoration: BoxDecoration(
color: Colors.white,
),
child: Column(
children: [
ListTile(
leading: Icon(
Icons.person,
color: Colors.black,
),
title: Text(
'Profile',
style: TextStyle(
color: Colors.black,
),
),
onTap: null,
),
ListTile(
leading: Icon(
Icons.account_balance_outlined,
color: Colors.black,
),
title: Text(
'Tansaction History',
style: TextStyle(
color: Colors.black,
),
),
onTap: null,
),
ListTile(
leading: Icon(
Icons.password_outlined,
color: Colors.black,
),
title: Text(
'Change Password',
style: TextStyle(
color: Colors.black,
),
),
onTap: null,
),
ListTile(
leading: Icon(
Icons.settings_accessibility_outlined,
color: Colors.black,
),
title: Text(
'Profile',
style: TextStyle(
color: Colors.black,
),
),
onTap: null,
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
ListTile(
leading: Icon(
Icons.login_outlined,
color: Colors.black,
),
title: Text(
'Logout',
style: TextStyle(
color: Colors.black,
),
),
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => `WelcomeScreen()));`
},
),
],
),
),
],
),
),
],
),
);
}
}

Use backgroundColor: Colors.white property in Drawer widget and you are all set to go.

Try this
Drawer(backgroundColor: Colors.white,
try this to make logout to set at the bottom.
Drawer(
child: Column(
children: <Widget>[
Container(
width: double.infinity,
padding: EdgeInsets.only(
top: 50,
bottom: 50,
),
color: Colors.yellow,
child: Center(
child: Column(
children: [
Container(
width: 100,
height: 100,
// decoration: BoxDecoration(
// shape: BoxShape.circle,
// image: DecorationImage(
// image: AssetImage('images/profile.png'),
// ),
// ),
),
SizedBox(
height: 20,
),
Text(
'Usama Tahir',
style: TextStyle(
color: Colors.black,
),
)
],
),
),
),
Container(
// color: Colors.white,
decoration: BoxDecoration(
color: Colors.white,
),
child: Column(
children: [
ListTile(
leading: Icon(
Icons.person,
color: Colors.black,
),
title: Text(
'Profile',
style: TextStyle(
color: Colors.black,
),
),
onTap: null,
),
ListTile(
leading: Icon(
Icons.account_balance_outlined,
color: Colors.black,
),
title: Text(
'Tansaction History',
style: TextStyle(
color: Colors.black,
),
),
onTap: null,
),
ListTile(
leading: Icon(
Icons.password_outlined,
color: Colors.black,
),
title: Text(
'Change Password',
style: TextStyle(
color: Colors.black,
),
),
onTap: null,
),
ListTile(
leading: Icon(
Icons.settings_accessibility_outlined,
color: Colors.black,
),
title: Text(
'Profile',
style: TextStyle(
color: Colors.black,
),
),
onTap: null,
),
],
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
ListTile(
leading: Icon(
Icons.login_outlined,
color: Colors.black,
),
title: Text(
'Logout',
style: TextStyle(
color: Colors.black,
),
),
onTap: null,
),
],
),
),
],
),
)

How to make custom appbar like this in flutter?

I design my own and trying to use this design too
so it's can be like my design??
but i don't understand how to put this button to appbar[action] cuz when i fill that button take full height
my code here i write by use it as Widget ,then i call for use at appbar
AppBar _profileAppbar(
context,
) {
return AppBar(
automaticallyImplyLeading: false,
title: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
"state.username",
style: TextStyle(
color: Colors.black, fontSize: 24, fontFamily: 'SukumvitSetBold'),
),
],
),
actions: <Widget>[
IconButton(
icon: Icon(
(IconData(
0xe908,
fontFamily: 'wishlistPost',
)),
color: HexColor("7225FF"),
size: 20,
),
iconSize: 30.0,
onPressed: () => print('Save post'),
),
InkWell(
onTap: () {},
child: Container(
padding: EdgeInsets.only(top: 20.0, bottom: 20.0),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(18.0),
),
child: Text(
"Edit",
style: TextStyle(color: Colors.white),
),
),
),
SizedBox(
height: 5,
width: 5,
),
],
iconTheme: IconThemeData(
color: Colors.black,
),
// leading: Icon(Icons.menu),
centerTitle: true,
backgroundColor: Colors.white,
elevation: 0.0,
);
}

One Idea is to make eveything custom without using AppBar().
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Row(
children: [
Expanded(child: Text("Username", style: TextStyle(color: Colors.black),)),
const SizedBox(width: 10),
Icon(Icons.message, color: Colors.black),
const SizedBox(width: 10),
TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.purple,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(999),
),
),
child: Text('Edit', style: TextStyle(color: Colors.white))
),
],
),
height: kToolbarHeight,
decoration: const BoxDecoration(color: Colors.white, boxShadow: [
BoxShadow(
offset: Offset(0.0, 2),
blurRadius: 14,
spreadRadius: 2,
)
]),
),
));
}
}

How to align widgets in a Row using crossAxisAlignment Flutter

I am trying to replicate the AppBar widget as shown in the image below. I tried using Row widget and added the required widgets inside it's children and added crossAxisAlignment: CrossAxisAlignment.center in order to align all the widgets in center (horizontally, as it is a Row widget). But I'm unable to achieve the results, getting A RenderFlex overflowed by 26 pixels on the right. error, (obviously because it is flowing out of the appBar area).
Required:
Mine:
Code:
Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.search),
color: Colors.black,
)
],
leading: InkWell(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 40,
width: 40,
decoration: const BoxDecoration(
color: Colors.grey,
shape: BoxShape.circle,
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Text(
"Welcome",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.normal,
color: Colors.grey,
),
),
Text(
"John",
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
],
),
],
),
onTap: () { // open drawer },
),
),
);
If anyone could guide me what I'm doing wrong, I would really appreciate it!
Thanks!

Lets try title
Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.search),
color: Colors.black,
)
],
title: InkWell(
onTap: (){},
child: Row(
children: [
Container(
width: 40,
height: 40,
decoration: const BoxDecoration(
color: Colors.grey,
shape: BoxShape.circle,
),
),
SizedBox(width: 10,),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Welcome",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.normal,
color: Colors.grey,
),
),
Text(
"John",
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
],
),
],
),
),
),
body: Container(
))
with leading
leadingWidth: double.infinity,
leading: InkWell(-------)
output:

The reason why this is happening is that you are using leading property, which has width limitation defined by leadingWidth properly of AppBar, which is 56.0 by default. You can try setting leadingWidth with value double.infinity and that would work.
Alternatively you should re-consider using leading, as its main purpose is some icon or small widget coming before title.

you can replace my source code, please it will work 100%. best of luck!
Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.search),
color: Colors.black,
)
],
leading: InkWell(
child: FittedBox(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 40,
width: 40,
decoration: const BoxDecoration(
color: Colors.grey,
shape: BoxShape.circle,
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Text(
"Welcome",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.normal,
color: Colors.grey,
),
),
Text(
"John",
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
],
),
],
),
),
),
));

How to bring last Item of column to bottom

I am very new to flutter, Trying to design a login screen as in the image, I took a column and added all the widgets one by one. But coming to bottom part I tried with mainAxisAlignment, crossAxisAlignment still no luck, The bottom part is coming after the login button in the screen i.e Don't have account? and Create Account. I need those fields in bottom left to the screen.Please help how to achieve this.
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Color.fromRGBO(150, 169, 62, 1),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
alignment: Alignment.topCenter,
child: Container(
child: Image.asset('assets/logo_400.png'),
margin: const EdgeInsets.all(60.0),
width: 150.0,
height: 150.0,
),
),
Text(
'Log into your account',
style: TextStyle(color: Colors.white, fontSize: 25),
),
Container(
margin: const EdgeInsets.all(40.0),
child: Column(
children: <Widget>[
TextFormField(
decoration: const InputDecoration(
icon: Icon(
Icons.phone,
color: Colors.white,
),
hintText: '10 digit mobile number',
hintStyle: TextStyle(color: Colors.white)),
),
SizedBox(height: 20,),
TextFormField(
decoration: const InputDecoration(
// enabledBorder: const OutlineInputBorder(
// // width: 0.0 produces a thin "hairline" border
// borderSide: const BorderSide(
// color: Colors.white, width: 0.0),
// ),
// border: const OutlineInputBorder(),
suffixIcon: Icon(
Icons.remove_red_eye,
color: Colors.white,
),
icon: Icon(
Icons.lock,
color: Colors.white,
),
hintText: 'Password',
hintStyle: TextStyle(color: Colors.white)),
),
SizedBox(
height: 5,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FlatButton(
//color: Colors.blue,
textColor: Colors.white,
//disabledColor: Colors.grey,
//disabledTextColor: Colors.black,
padding: EdgeInsets.all(8.0),
splashColor: Colors.blueAccent,
onPressed: () {
/*...*/
},
child: Text(
"Forgot Password",
style: TextStyle(
fontSize: 15.0,
decoration: TextDecoration.underline),
),
),
],
),
SizedBox(
height: 25,
),
Container(
margin: EdgeInsets.all(25.0),
child: ButtonTheme(
minWidth: 300.0,
height: 50.0,
buttonColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
child: RaisedButton(
//shape: StadiumBorder(),
onPressed: () {},
textColor: Colors.black,
padding: const EdgeInsets.all(0.0),
child: Text(
'Login',
style: TextStyle(fontSize: 20),
),
),
),
),
//Spacer(),
SizedBox(
height: 150,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
"Don't have a account?",
style: TextStyle(
color: Colors.white, fontSize: 15),
),
FlatButton(
//color: Colors.blue,
textColor: Colors.white,
//disabledColor: Colors.grey,
//disabledTextColor: Colors.black,
padding: EdgeInsets.all(8.0),
splashColor: Colors.blueAccent,
onPressed: () {
/*...*/
},
child: Text(
"Create Account",
style: TextStyle(
fontSize: 20.0,
decoration: TextDecoration.underline),
),
)
],
)
],
)
],
)),
],
)),
);

Don't have account? and Create Account. I need those fields in bottom
left to the screen
just change
Row(mainAxisAlignment: MainAxisAlignment.end
to
Row(mainAxisAlignment: MainAxisAlignment.start
BTW Have you tested this layout in landscape? You should wrap the entire form in a list view so that there is no overflow warnings.

I know this is from a while ago.
But maybe it can help someone in the same spot.
The best solution to it is to wrap your widget Expanded and Align widgets As so :
Expanded(
child: Align(
alignment: Alignment.bottomLeft,
child: ListTile(
title: Text('Logout'),
onTap: _logout,
),
),
)

You can wrapping Column in Row widget then after column children put your bottom part.

How to layout a cell in flutter with flexible and expandable widgets

I'm trying to layout a cell in flutter and can't space them without a lot of hardcoded padding. The below image is how the layout is, and how I want it.
Using expandable or flexible layouts in cells, I keep getting blank screens with no cells. They seem to work well on non-scrollable layouts.
Current
Want
#override
Widget build(BuildContext context) {
Constants constants = Constants.of(context);
return Container(
constraints: BoxConstraints.tightFor(height: constants.d200),
margin: EdgeInsets.all(10.0),
child: Card(
color: constants.white,
child: Column(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
color: constants.white,
child: Text(product.name,
style: TextStyle(
fontWeight: FontWeight.normal,
color: constants.orange)),
),
SizedBox(
height: constants.d10,
),
Container(
color: constants.white,
child: Text(product.ean,
style: TextStyle(
fontWeight: FontWeight.bold, color: constants.black)),
),
Container(
color: constants.white,
child: Icon(
Icons.ac_unit,
size: 10,
color: constants.orange,
),
),
],
),
],
),
),
);
}

One way of doing it.
e.g Code:
#override
Widget build(BuildContext context) {
// Constants constants = Constants.of(context);
return Scaffold(
appBar: AppBar(),
body: Center(
child: SizedBox(
width: 250.0,
child: Card(
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.white,
child: RaisedButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.black)),
onPressed: null,
disabledColor: Colors.white,
child: Text('20 EUR',
style: TextStyle(
fontWeight: FontWeight.normal,
color: Colors.black)),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
onPressed: null,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.black)),
disabledColor: Colors.white,
child: Text('75546DRE4263',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.orange,
)),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
Expanded(
child: RaisedButton(
onPressed: null,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.black)),
disabledColor: Colors.white,
child: Icon(
Icons.ac_unit,
size: 10,
color: Colors.orange,
),
),
),
SizedBox(
width: 5.0,
),
Expanded(
child: RaisedButton(
onPressed: null,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
disabledColor: Colors.white,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.black)),
child: Text('Hint',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
)),
),
),
],
),
),
],
),
),
),
),
);
}
Output: