Dynamically expand a component and compress another component in flutter - flutter

I have the following code
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Flexible(
child: Container(
height: 32.0,
padding: EdgeInsets.symmetric(
horizontal: 12.0, vertical: 5.0),
decoration: BoxDecoration(
color: Colors.green.shade300,
borderRadius: BorderRadius.circular(7.0),
),
child: Row(
children: <Widget>[
Flexible(
child: Text(
'Save 20%',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.poppins(
fontSize: 12.0,
color: Colors.white,
fontWeight: FontWeight.w500,
letterSpacing: 0.5,
),
),
),
],
),
),
),
SizedBox(
width: 8.0,
),
ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Material(
child: InkWell(
splashColor: Colors.green.withOpacity(0.5),
onTap: () {
print('Add to cart');
if (FirebaseAuth.instance.currentUser == null) {
Navigator.pushNamed(context, '/sign_in');
return;
}
cartBloc.add(
AddToCartEvent(product.id, currentUser.uid));
},
child: Container(
width: 38.0,
height: 35.0,
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.01),
borderRadius: BorderRadius.circular(8.0),
border: Border.all(
width: 0.8,
color: Colors.black.withOpacity(0.15),
),
),
child: Icon(
FontAwesomeIcons.cartPlus,
color: Colors.black45,
size: 18.0,
),
),
),
),
),
],
),
),
which results in the following view
I want to have the following criteria
When I click the cart icon for the first time
1. add to cart button should expand if quantity > 0
2. "You save 20%" component should compress to square box "20%"
Something like this
I would highly appreciate any kind of feedback, comments, hints, solution pointers. Thx

I think in your case you can use an AnimatedContainer class.
pseudocode
var isClickedOnCart;
AnimatedContainer(
....
width: isClickedOnCart? 100 : 20;
...
/// YOUR CODE HERE///
)
/// ONPRESSED CART CARD
onPressed(){
if(quantity > 0){
setState(){
isClickedOnCart = !isClickedOnCart;
}
}
}

You can use this. Remember that, I have used only setState.
String text = 'Save 20%';
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 32.0,
padding: EdgeInsets.symmetric(horizontal: 12.0, vertical: 5.0),
decoration: BoxDecoration(
color: Colors.green.shade300,
borderRadius: BorderRadius.circular(7.0),
),
child: Center(
child: Text(
text,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12.0,
color: Colors.white,
fontWeight: FontWeight.w500,
letterSpacing: 0.5,
),
),
),
),
SizedBox(
width: 8.0,
),
ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Material(
child: InkWell(
splashColor: Colors.green.withOpacity(0.5),
onTap: () {
//here I use setState for sate management
//TODO: implement your logic to change the text
setState(() {
text = text == 'Save 20%' ? '20%' : 'Save 20%';
});
},
child: Container(
width: 38.0,
height: 35.0,
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.01),
borderRadius: BorderRadius.circular(8.0),
border: Border.all(
width: 0.8,
color: Colors.black.withOpacity(0.15),
),
),
child: Icon(
Icons.shopping_cart,
color: Colors.black45,
size: 18.0,
),
),
),
),
),
],
),
));
}

Related

How to write text below the container in row

I have always struggled with making this ui dynamically. Its a row of 4 or can be more than 4 containers with images in it and below that row there is text showing the name of the category made. I currently doing the name part with padding's according to my own device but it slips away in larger or smaller screen size devices other than mine. How can I tackle this. Image is also attached for better understanding if required. Also in the next code named intopage I am trying to stick the please read lines and the terms and conditions, privacy policy to the bottom but it isn't sticking
Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(color: Colors.black),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
child: Center(
child: Image.asset("assets/salonicon.png",
scale: 1.2, color: Colors.white),
),
),
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(color: Colors.black),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
child: Center(
child: Image.asset("assets/hairdresser.png",
scale: 1.2, color: Colors.white),
),
),
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(color: Colors.black),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
child: Center(
child: Image.asset("assets/facial-massage.png",
scale: 1.2, color: Colors.white),
),
),
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(color: Colors.black),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
child: Center(
child: Image.asset("assets/body-massage.png",
scale: 1.2, color: Colors.white),
),
),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.start,
// crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 30.0),
child: Text(
"Salons".toUpperCase(),
textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.w600),
),
),
Padding(
padding: const EdgeInsets.only(left: 50.0),
child: Text(
"Hair".toUpperCase(),
textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.w600),
),
),
Padding(
padding: const EdgeInsets.only(left: 60.0),
child: Text(
"Skin".toUpperCase(),
textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.w600),
),
),
Padding(
padding: const EdgeInsets.only(left: 65.0),
child: Text(
"Body".toUpperCase(),
textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.w600),
),
),
],
),
class IntroPage extends StatelessWidget {
const IntroPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFF29F76),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Image.asset(
"assets/intropage.png",
fit: BoxFit.fill,
),
Padding(
padding: const EdgeInsets.only(
top: 550,
),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignUpPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign Up",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black),
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 650,
),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignInPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign In",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Color(0xFFFE6B01)),
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 750,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 2,
width: 150,
color: Colors.white,
),
const Text(
" Please Read ",
style: TextStyle(color: Colors.white),
),
Container(
height: 2,
width: 150,
color: Colors.white,
),
],
),
),
Padding(
padding: const EdgeInsets.only(
top: 760,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
TermsandConditions()));
},
child: const Text(
"Terms & Conditions",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
Padding(
padding: const EdgeInsets.only(right: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PrivacyPolicy()));
},
child: const Text(
"Privacy Policy",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
],
),
),
],
)
],
),
),
);
}
}
Use row then columns to specify them according to your needs it took me 3 minutes to change your code according to your needs super easy just practice a couple of times and you won' forget it.
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
children: <Widget>[
Container(
height: 100.0,
width: 100.0,
decoration: BoxDecoration(
image: const DecorationImage(
image: AssetImage('assets/rnpic.png'),
fit: BoxFit.fill,
),
border: Border.all(color: Colors.black),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
child: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(),
child: Align(
alignment: Alignment.topRight,
child: Container(
width: 70,
height: 30,
decoration: BoxDecoration(
color: const Color(0xFFFF6D00),
border: Border.all(
color: const Color(0xFFFF6D00)),
borderRadius: const BorderRadius.only(
topRight: Radius.circular(20.0),
)),
child: const Center(
child: Text(
"-50% OFF",
style: TextStyle(color: Colors.white),
),
),
),
),
)
],
),
),
],
),
const SizedBox(
width: 150,
child: Center(
child: Text(
"Colorado Salon special hairstyle",
style:
TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
),
),
),
Container(
width: 80,
height: 30,
decoration: const BoxDecoration(
color: Color(0xFFFF6D00),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Center(
child: Text(
"View".toUpperCase(),
style: const TextStyle(
fontWeight: FontWeight.w600, color: Colors.white),
),
),
),
],
)
],
),
Make the layout like this
Row(
mainAxisAlignment : MainAxisAlignment.spaceBetween,
children:[
//item 1
Column(
children:[
Icon(),
Text(),
]
),
//item 2
Column(
children:[
Icon(),
Text(),
]
),
//item 3
Column(
children:[
Icon(),
Text(),
]
)
]
)

How to add circular border to dialog in flutter?

How to add circular border for dialog box in a flutter?,I tried the below code but I can't able to get the desired output, I already added circular border but it's not working, I need circular border for dialog,Refer the expected output for details, please guide
My code :
`
class CustomDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
const double padding = 1.0;
return Dialog(
backgroundColor: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0))),
child: Column(mainAxisSize: MainAxisSize.min, children: [
Container(
margin: EdgeInsets.all(1),
width: double.infinity,
child: Text('title',
style: TextStyle(fontSize: 30, color: Colors.white)),
color: Colors.green,
),
Container(
color: Colors.white,
padding: EdgeInsets.all(10),
child: ListView(
shrinkWrap: true,
children: [
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
],
),
),
Divider(
color: Colors.white,
),
Container(
color: Colors.white,
height: 50,
padding: EdgeInsets.all(5),
alignment: Alignment.centerRight,
child: Text(
'CANCEL',
style: TextStyle(fontSize: 20),
)),
])));
}
}
`
My expectation:
current output:
Just need to add ClipBehavior to Dialog.
import 'package:flutter/material.dart';
class CustomDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
const double padding = 1.0;
return Dialog(
backgroundColor: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
clipBehavior: Clip.antiAlias, // add clipBehavior
child: Column(mainAxisSize: MainAxisSize.min, children: [
Container(
margin: EdgeInsets.all(1),
width: double.infinity,
child: Text('title',
style: TextStyle(fontSize: 30, color: Colors.white)),
color: Colors.green,
),
Container(
color: Colors.white,
padding: EdgeInsets.all(10),
child: ListView(
shrinkWrap: true,
children: [
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
],
),
),
Divider(
color: Colors.white,
),
Container(
color: Colors.white,
height: 50,
padding: EdgeInsets.all(5),
alignment: Alignment.centerRight,
child: Text(
'CANCEL',
style: TextStyle(fontSize: 20),
)),
]),
);
}
}
The issue was with the Container you used to wrap the other widgets, you can add specific border radius to each container to fix.
I added a demo and code to get what you wanted your output to look like:
class CustomDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
height: 340,
child: Column(
children: [
Container(
height: 60,
width: double.infinity,
padding: EdgeInsets.all(
15.0,
),
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(
15.0,
),
topRight: Radius.circular(
15.0,
),
),
),
child: Text(
'Baby Names',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
),
...List.generate(
5,
(index) => Padding(
padding: const EdgeInsets.all(10.0),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'List Names',
style: TextStyle(
fontSize: 18,
),
),
),
),
),
Divider(
color: Colors.grey[200],
thickness: 1.5,
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Align(
alignment: Alignment.centerRight,
child: Text(
'CANCEL',
style: TextStyle(
fontSize: 18,
color: Colors.green,
),
),
),
),
],
),
),
);
}
}
RESULT:
You added RoundedRectangleBorder(),
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: MyWidget(),
),
);
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Dialog(
backgroundColor: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: Container(
padding: EdgeInsets.only(
top: 10.0,
bottom: 5,
left: 5,
right: 5,
),
margin: EdgeInsets.only(top: 5),
decoration: new BoxDecoration(
color: Colors.white,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(5),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 10.0,
offset: const Offset(0.0, 10.0),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min, // To make the card compact
children: <Widget>[
Text(
"Baby",
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.w700,
),
),
Divider(color: Colors.grey,),
SizedBox(height: 16.0),
Text(
"text",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16.0,
),
),
SizedBox(height: 24.0),
Align(
alignment: Alignment.bottomRight,
child: FlatButton(
onPressed: () {
Navigator.of(context).pop(); // To close the dialog
},
child: Text("buttonText"),
),
),
],
),
),
);
}
}

MainAxisAlignment under SingleChildScrollView is not working

I developed a login screen in which first i get the render flex error when i open the keyboard so for that i wrap my widgets in SingleChildScrollView, but after that mainAxisAlignment of Column is not working but when i removed SingleChildScrollView then everything working fine except render flex error. i don't know what to do kindly help please.
Following is the code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class LoginScreenOne extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Stack(
children: [
Container(
height: double.infinity,
width: double.infinity,
color: Colors.blue,
),
SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: double.infinity,
child: Padding(
padding: const EdgeInsets.only(top: 70, left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.keyboard_arrow_up,
size: 30,
color: Colors.white,
),
Text(
"Login Screen",
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold),
),
],
),
),
),
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.6,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 50, left: 20),
child: Text(
"Welcome",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: TextField(
decoration: InputDecoration(
icon: Icon(Icons.email),
hintText: "Enter User Name"),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: TextField(
obscureText: true,
decoration: InputDecoration(
icon: Icon(Icons.vpn_key),
hintText: "Enter Password"),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: Container(
width: double.infinity,
height: 50,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
side: BorderSide(width: 2, color: Colors.blue)),
textColor: Colors.blue,
child: Text(
"Sign In",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 16),
),
onPressed: () {},
),
),
),
Center(
child: Text(
"Forgot Password",
style: TextStyle(color: Colors.grey),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: Container(
width: double.infinity,
height: 50,
child: FlatButton(
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
child: Text("Create Account"),
color: Colors.blue,
onPressed: () {},
),
),
)
],
),
)
],
),
),
],
),
));
}
}
You can try this code blocks
CustomScrollView(
scrollDirection: Axis.vertical,
slivers: [
SliverFillRemaining(
hasScrollBody: false,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('test'),
for (int i = 0; i < 10; i++) const FlutterLogo(size: 80)
],
),
),
],
),
After wrapping Column with SingleChildScrollView wrap it with Center widget.
Set the alignment of the outer container, then wrap the column with singleChildScrollView.
Container(
alignment: Alignment.center, //Set container alignment then wrap the column with singleChildScrollView
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: []
),
);
Yeah MainAxisAlignment' property of a 'Column' does not work when you wrap the 'Column' in 'SingleChildScrollView'. I dont know the reason, but thats how it is.
I use 'SizedBox(height: xx)' to give space between widgets inside the 'Column' when i absolutely need a scroll view, otherwise i tend not to use the 'SingleChildScrollView'.
you can Column wrap with a Container...
full code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class LoginScreenOne extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Stack(
children: [
Container(
height: double.infinity,
width: double.infinity,
color: Colors.blue,
),
SingleChildScrollView(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: double.infinity,
child: Padding(
padding: const EdgeInsets.only(top: 70, left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.keyboard_arrow_up,
size: 30,
color: Colors.white,
),
Text(
"Login Screen",
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold),
),
],
),
),
),
),
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.6,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 50, left: 20),
child: Text(
"Welcome",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: TextField(
decoration: InputDecoration(
icon: Icon(Icons.email),
hintText: "Enter User Name"),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: TextField(
obscureText: true,
decoration: InputDecoration(
icon: Icon(Icons.vpn_key),
hintText: "Enter Password"),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: Container(
width: double.infinity,
height: 50,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
side: BorderSide(width: 2, color: Colors.blue)),
textColor: Colors.blue,
child: Text(
"Sign In",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 16),
),
onPressed: () {},
),
),
),
Center(
child: Text(
"Forgot Password",
style: TextStyle(color: Colors.grey),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: Container(
width: double.infinity,
height: 50,
child: FlatButton(
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
child: Text("Create Account"),
color: Colors.blue,
onPressed: () {},
),
),
)
],
),
)
],
),
),
],
),
));
}
}
This will work...
Set the alignment of the outer container as alignment.bottomCenter, then wrap the column with singleChildScrollView. It will definitely works. Thankyou.

Card size not being adjusted when wrapped in a container

In my flutter app I have a GridView in which I list cards. In the cards I want to have an image and some text. I am trying to do this as follows:
import 'package:flutter/material.dart';
class Home extends StatefulWidget{
#override
State<StatefulWidget> createState() {
return HomeState();
}
}
class HomeState extends State<Home>{
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
child: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.green,
Colors.teal,
]
)
),
),
Padding(
padding: const EdgeInsets.only(top: 65),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.white60, width: 2.0)
),
padding: EdgeInsets.all(8),
child: CircleAvatar(
backgroundColor: Colors.white,
child: Icon(Icons.restaurant, size: 120,),
),
),
]
),
SizedBox(
height: 8,
),
Text(
"Genesis Technologies",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
color: Colors.white
),
),
SizedBox(
height: 6,
),
Text(
"Please take the following precautions",
style: TextStyle(
fontSize: 16,
color: Colors.white70
),
),
],
),
),
Container(
margin: EdgeInsets.only(top: 350),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
)
),
),
Container(
margin: EdgeInsets.only(top: 250),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30)
)
),
child: Padding(
padding: EdgeInsets.all(0),
child: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
children: <Widget>[
Container(
height: 200,
width: 100,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.restaurant, size: 120,),
Text(
"Cover your mouth and nose when yous sneeze or cough",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
],
),
),
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.restaurant, size: 120,),
Text(
"Avoid touching your face with unwashed hands",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
],
),
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.restaurant, size: 120,),
Text(
"Stay home if you don't need to get out for critical matters",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
],
),
),
),
],
)
),
),
],
),
),
),
);
}
}
And this renders the list of cards fine. My problem is that the cards bottom is being overflowed. I wrap the card in a container to fix this which looks like the follows:
Container(
height: 200,
width: 100,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.restaurant, size: 120,),
Text(
"Some text here",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
],
),
),
),
),
I don't understand why this is happening. Any help would be appreciated. Thanks.
ok... I usual don't do that but I had to rework the whole structure because most of the things didn't make any sense. Now I don't really understand.. Why do you want cards to increase size to not overflow.. Did you mean decrease size? The cards in your grid view will be always the same because you use grid view. You have set crossAxisCount to 2 so 2 items in x axis and square.. If you add more, then on smaller screen they will be accessible by scrolling and will not overflow. I have set position of the container where you have all your cards from the top to 1/3 of the screen height which perhaps is better then hardcoding it to fixed size as you had. Try it and let me know if you need to adjust it in any other way.
UPDATE
Scaffold(
body: Column(children: [
Flexible(
flex: 2,
child: Container(
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.green,
Colors.teal,
])),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 1,
child: FractionallySizedBox(
heightFactor: 0.5,
child: Container(
width: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
border:
Border.all(color: Colors.white60, width: 2.0)),
padding: EdgeInsets.all(8),
child: CircleAvatar(
backgroundColor: Colors.white,
child: Icon(
Icons.restaurant,
),
),
),
),
),
SizedBox(
height: 8,
),
Text(
"Genesis Technologies",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
color: Colors.white),
),
SizedBox(
height: 6,
),
Text(
"Please take the following precautions",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16, color: Colors.white70),
),
],
),
),
),
Flexible(
flex: 3,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.green,
Colors.teal,
])),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30))),
child: Padding(
padding: EdgeInsets.all(0),
child: GridView(
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
children: <Widget>[
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(
Icons.restaurant,
size: 120,
),
Text(
"Cover your mouth and nose when yous sneeze or cough",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(
Icons.restaurant,
size: 120,
),
Text(
"Avoid touching your face with unwashed hands",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(
Icons.restaurant,
size: 120,
),
Text(
"Stay home if you don't need to get out for critical matters",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
),
],
)),
),
),
),
]),
);

How to create Column in Center of App with Left/Right margins?

im new to Flutter. I have started learning a few days ago and am trying to grasp the concept of Rows and Columns.
I made a simple Page like this.
To explain my code I first make a Column to put everything in.
Then i use a Row for the TopBar, and then another Row to put the things into the body, so that i can put a Column in the center of the Page, with a bit of space on both sides of it. I then pack Text and Button in a Column and insert it into the Column in the Middle of the Page.
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home: MainPage(),
));
class MainPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
Color Color1 = const Color.fromRGBO(204, 126, 185, 100);
Color Color2 = const Color.fromRGBO(140, 235, 203, 100);
Color Color3 = const Color.fromRGBO(227, 225, 204, 100);
Color Color4 = const Color.fromRGBO(89, 130, 145, 100);
return Scaffold(
body: Container(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(20.0, 50.0, 0, 0),
child: SizedBox(
child: Image.asset('assets/MenuIcon.png'),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 50.0, 20.0, 0),
child: SizedBox(
child: Image.asset('assets/SearchIcon.png'),
),
),
],
),
Divider(height: 50,),
Expanded(
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(),
),
Expanded(
flex: 5,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Erwachsen werden",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: Color1,
),
),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Glückliches Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: Color2,
),
),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Ab in das Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: Color3,
),
)
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Alleine Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: Color4,
),
),
),
],
),
],
),
),
Expanded(
flex:1,
child: Container(),
),
],
),
),
],
),
),
);
}
}
I feel like there is a lot of unnecessary Coding, but i can't seem to be able to improve it, with it working properly.
Can anybody Help improve my code?
Simply what i want to achieve is a Column in the middle of the body with margin to the left and right of the screen, without a million lines of code.
Scaffold by default has an parameter for AppBar() use that for your app bar
and as per your layout I will suggest to use ListView() instead of Column()
using Listview will automatically scroll your page if length of your page extends
and also has an parameter as padding using which you can add space on your left and right side
refer below mentioned code structure
Scaffold(
appbar: AppBar(),
body: ListView(
padding: EdgeInsets.only(left:12.0,right:12.0),
children: <Widget>[
//your list of widgets here
],
)
)
Try this:
Code example
Center(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 10),
height: 400,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Material(
color: Colors.transparent,
child: Image.asset(
"assets/images/logo.png",
height: 100,
width: 200,
),
),
//email
TextFormField(
style: TextStyle(
fontFamily: "Light",
color: Theme.of(context).primaryColor,
),
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
cursorColor: Theme.of(context).primaryColor,
decoration: InputDecoration(
labelText: 'Username',
filled: true,
fillColor: Colors.white,
),
),
TextFormField(
style: TextStyle(
fontFamily: "Light",
color: Theme.of(context).primaryColor,
),
keyboardType: TextInputType.visiblePassword,
textInputAction: TextInputAction.done,
cursorColor: Theme.of(context).primaryColor,
obscureText: passwordVisible,
controller: _passwordController,
decoration: InputDecoration(
labelText: 'Password',
filled: true,
fillColor: Colors.white,
onPressed: () {},
),
),
),
Container(
child: RaisedButton(
onPressed: () {},
child: Text(
"Login",
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontFamily: "Light",
),
),
),
),
],
)),
)
I removed unnecessary code ! It may help you !
Color color1 = const Color.fromRGBO(204, 126, 185, 100);
Color color2 = const Color.fromRGBO(140, 235, 203, 100);
Color color3 = const Color.fromRGBO(227, 225, 204, 100);
Color color4 = const Color.fromRGBO(89, 130, 145, 100);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.white,
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(20.0, 50.0, 0, 0),
child: SizedBox(
// child: Image.asset('assets/MenuIcon.png'),
child:Icon(Icons.menu,color:Colors.black)
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 50.0, 20.0, 0),
child: SizedBox(
// child: Image.asset('assets/SearchIcon.png')
child:Icon(Icons.search,color:Colors.black)
),
),
],
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left:50,right:50),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize:MainAxisSize.min,
children: <Widget>[
Text(
"Erwachsen werden",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: color1,
child: Text('Button')),
),
),
SizedBox(height: 10.0),
Text(
"Glückliches Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: color2,
child: Text('Button')),
),
),
SizedBox(height: 10.0),
Text(
"Ab in das Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: color3,
child: Text('Button')),
)),
SizedBox(height: 10.0),
Text(
"Alleine Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: color4,
child: Text('Button')),
),
),
],
),
),
),
],
),
),
);
}
}