Related
So i have this build method:
#override
Widget build(BuildContext context) {
return Scaffold(
body: _createBody(),
);
}
Widget _createBody(){
return SafeArea(
child: Column(
children: [
Container(
margin: const EdgeInsets.only(top: 5, left: 10, right: 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"xOrder HD",
style: TextStyle(
color: Colors.blue[900],
fontSize: 36
),
),
Container(
padding: const EdgeInsets.only(left: 13, top: 13),
alignment: Alignment.bottomLeft,
child: Text(AppVersion.xOrderVersion()),
)
],
)
),
Container(
margin: const EdgeInsets.symmetric(horizontal: 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context)!.solutionFor,
textAlign: TextAlign.start,
),
],
)
),
Expanded(
child: Container(
margin: const EdgeInsets.only(left: 25, right: 25, top: 20, bottom: 10),
child: Row(
children: [
Expanded(
child: Container(
child: Column(
children: [
Container(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context)!.companyList,
style: const TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold,
)
),
],
),
decoration: BoxDecoration(
color: mainColor,
borderRadius: const BorderRadius.only(topLeft: Radius.circular(4), topRight: Radius.circular(4))
),
),
_loadedAziende.isEmpty ?
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context)!.noCompanyFound,
style: const TextStyle(
color: Colors.black54,
fontSize: 16
)
),
const SizedBox(height: 50,),
GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => QrCodeScanner(delegate: this,)));
},
child: Material(
elevation: 5,
borderRadius: const BorderRadius.all(Radius.circular(5)),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.add, color: Colors.white,),
const SizedBox(width: 10,),
Text(
AppLocalizations.of(context)!.newCompany,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white,
)
),
],
),
decoration: BoxDecoration(
color: mainColor,
borderRadius: const BorderRadius.all(Radius.circular(5))
),
),
)
)
],
)
)
:
Expanded(
child: Stack(
children: [
ListView.separated(
itemCount: _aziendeToShow.length,
itemBuilder: (ctx, index) {
return InfoCell(
info: _aziendeToShow[index],
delegate: this,
);
},
separatorBuilder: (ctx, index) => const Divider(height: 1,),
),
Positioned(
bottom: 15,
right: 15,
child: GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => QrCodeScanner(delegate: this,)));
},
child: Container(
padding: const EdgeInsets.all(10),
child: const Icon(Icons.qr_code_scanner, color: Colors.white, size: 28),
decoration: BoxDecoration(
color: mainColor,
shape: BoxShape.circle
),
)
)
)
],
)
)
],
),
decoration: BoxDecoration(
color: Colors.grey[100],
border: Border.all(color: Colors.grey[500]!),
borderRadius: const BorderRadius.all(Radius.circular(5))
),
),
),
if(_loadedAziende.isNotEmpty)
const SizedBox(width: 25,),
if(_loadedAziende.isNotEmpty)
Expanded(
child: Container(
child: Column(
children: [
Container(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context)!.login,
style: const TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold,
)
),
],
),
decoration: BoxDecoration(
color: mainColor,
borderRadius: const BorderRadius.only(topLeft: Radius.circular(4), topRight: Radius.circular(4))
),
),
isEmptyOrNull(_selectedAzienda) ?
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context)!.selectAcompany,
style: const TextStyle(
color: Colors.black54,
fontSize: 16
)
),
],
)
)
:
Expanded(
child: Column(
children: [
Container(
height: 150,
margin: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.grey[400]!),
image: DecorationImage(
image: Image.network(_selectedAzienda!.aziendaLogo).image,
fit: BoxFit.contain
)
),
),
Text(
_selectedAzienda!.aziendaCode,
style: const TextStyle(
color: Colors.black,
fontSize: 25,
fontWeight: FontWeight.bold
),
),
Container(
margin: const EdgeInsets.symmetric(vertical: 30, horizontal: 15),
child: const TextField(
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
icon: Icon(Icons.person),
border: OutlineInputBorder(),
labelText: 'Username',
),
)
),
Container(
margin: const EdgeInsets.only(bottom: 30, left: 15, right: 15),
child: const TextField(
obscureText: true,
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
icon: Icon(Icons.password),
border: OutlineInputBorder(),
labelText: 'Password',
),
)
),
const Spacer(),
Container(
margin: const EdgeInsets.symmetric(vertical: 15, horizontal: 15),
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.login, color: Colors.white,),
const SizedBox(width: 15,),
Text(
AppLocalizations.of(context)!.login,
style: const TextStyle(
fontSize: 22,
color: Colors.white,
fontWeight: FontWeight.bold
),
)
],
),
decoration: BoxDecoration(
color: mainColor,
borderRadius: const BorderRadius.all(Radius.circular(5))
),
)
],
)
)
],
),
decoration: BoxDecoration(
color: Colors.grey[100],
border: Border.all(color: Colors.grey[500]!),
borderRadius: const BorderRadius.all(Radius.circular(5))
)
),
)
],
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
margin: const EdgeInsets.all(10),
height: 82,
width: 135,
decoration: BoxDecoration(
image: DecorationImage(
image: Image.asset("assets/images/logo-axentya-inv.png").image,
fit: BoxFit.fill
)
),
)
],
)
],
),
);
}
And this is the final result:
The problem presents when i click on the TextField and the keyboard shows up going above the TextFields and showing up the black and yellow banner:
I don't know why in this screenshot the keyboard doesn't show up, but i swear that is opened.
If i try to put the main Column container inside a SingleChildScrollView, the compiler tells me it cannot render it cause I'm not specifying the height dimensions.
How should i fix this.
You cannot use Expanded inside SingleChildScrollView. However, you can use CustomScrollView along with SliverFillRemaining widget to achieve that:
class TestPage extends StatelessWidget {
const TestPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverFillRemaining(
hasScrollBody: true,
child: _createBody(),
)
],
),
);
}
Widget _createBody(){
return SafeArea(
child: Column(
children: [
Container(
margin: const EdgeInsets.only(top: 5, left: 10, right: 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"xOrder HD",
style: TextStyle(
color: Colors.blue[900],
fontSize: 36
),
),
Container(
padding: const EdgeInsets.only(left: 13, top: 13),
alignment: Alignment.bottomLeft,
child: Text(AppVersion.xOrderVersion()),
)
],
)
),
Container(
margin: const EdgeInsets.symmetric(horizontal: 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context)!.solutionFor,
textAlign: TextAlign.start,
),
],
)
),
Expanded(
child: Container(
margin: const EdgeInsets.only(left: 25, right: 25, top: 20, bottom: 10),
child: Row(
children: [
Expanded(
child: Container(
child: Column(
children: [
Container(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context)!.companyList,
style: const TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold,
)
),
],
),
decoration: BoxDecoration(
color: mainColor,
borderRadius: const BorderRadius.only(topLeft: Radius.circular(4), topRight: Radius.circular(4))
),
),
_loadedAziende.isEmpty ?
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context)!.noCompanyFound,
style: const TextStyle(
color: Colors.black54,
fontSize: 16
)
),
const SizedBox(height: 50,),
GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => QrCodeScanner(delegate: this,)));
},
child: Material(
elevation: 5,
borderRadius: const BorderRadius.all(Radius.circular(5)),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.add, color: Colors.white,),
const SizedBox(width: 10,),
Text(
AppLocalizations.of(context)!.newCompany,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white,
)
),
],
),
decoration: BoxDecoration(
color: mainColor,
borderRadius: const BorderRadius.all(Radius.circular(5))
),
),
)
)
],
)
)
:
Expanded(
child: Stack(
children: [
ListView.separated(
itemCount: _aziendeToShow.length,
itemBuilder: (ctx, index) {
return InfoCell(
info: _aziendeToShow[index],
delegate: this,
);
},
separatorBuilder: (ctx, index) => const Divider(height: 1,),
),
Positioned(
bottom: 15,
right: 15,
child: GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => QrCodeScanner(delegate: this,)));
},
child: Container(
padding: const EdgeInsets.all(10),
child: const Icon(Icons.qr_code_scanner, color: Colors.white, size: 28),
decoration: BoxDecoration(
color: mainColor,
shape: BoxShape.circle
),
)
)
)
],
)
)
],
),
decoration: BoxDecoration(
color: Colors.grey[100],
border: Border.all(color: Colors.grey[500]!),
borderRadius: const BorderRadius.all(Radius.circular(5))
),
),
),
if(_loadedAziende.isNotEmpty)
const SizedBox(width: 25,),
if(_loadedAziende.isNotEmpty)
Expanded(
child: Container(
child: Column(
children: [
Container(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context)!.login,
style: const TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold,
)
),
],
),
decoration: BoxDecoration(
color: mainColor,
borderRadius: const BorderRadius.only(topLeft: Radius.circular(4), topRight: Radius.circular(4))
),
),
isEmptyOrNull(_selectedAzienda) ?
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context)!.selectAcompany,
style: const TextStyle(
color: Colors.black54,
fontSize: 16
)
),
],
)
)
:
Expanded(
child: ListView(
children: [
Container(
height: 150,
margin: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.grey[400]!),
image: DecorationImage(
image: Image.network(_selectedAzienda!.aziendaLogo).image,
fit: BoxFit.contain
)
),
),
Text(
_selectedAzienda!.aziendaCode,
style: const TextStyle(
color: Colors.black,
fontSize: 25,
fontWeight: FontWeight.bold
),
),
Container(
margin: const EdgeInsets.symmetric(vertical: 30, horizontal: 15),
child: const TextField(
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
icon: Icon(Icons.person),
border: OutlineInputBorder(),
labelText: 'Username',
),
)
),
Container(
margin: const EdgeInsets.only(bottom: 30, left: 15, right: 15),
child: const TextField(
obscureText: true,
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
icon: Icon(Icons.password),
border: OutlineInputBorder(),
labelText: 'Password',
),
)
),
const Spacer(),
Container(
margin: const EdgeInsets.symmetric(vertical: 15, horizontal: 15),
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.login, color: Colors.white,),
const SizedBox(width: 15,),
Text(
AppLocalizations.of(context)!.login,
style: const TextStyle(
fontSize: 22,
color: Colors.white,
fontWeight: FontWeight.bold
),
)
],
),
decoration: BoxDecoration(
color: mainColor,
borderRadius: const BorderRadius.all(Radius.circular(5))
),
)
],
)
)
],
),
decoration: BoxDecoration(
color: Colors.grey[100],
border: Border.all(color: Colors.grey[500]!),
borderRadius: const BorderRadius.all(Radius.circular(5))
)
),
)
],
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
margin: const EdgeInsets.all(10),
height: 82,
width: 135,
decoration: BoxDecoration(
image: DecorationImage(
image: Image.asset("assets/images/logo-axentya-inv.png").image,
fit: BoxFit.fill
)
),
)
],
)
],
),
);
}
}
Add this resizeToAvoidBottomPadding: false to the Scaffold.
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
body: _createBody(),
);
}
EDIT:
If you use de flutter_keyboard_visibility to reduce the logo image when the soft Keyboard is shown would be something like this:
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
#override
Widget build(BuildContext context) {
return KeyboardVisibilityBuilder(builder: (context, isKeyboardVisible) {
return Scaffold(
resizeToAvoidBottomInset: false,
body: _createBody(isKeyboardVisible),
);
});
}
Widget _createBody(bool isKeyboardVisible) {
...
Expanded(
child: Column(
children: [
Container(
height: isKeyboardVisible ? 50 : 150, <<--- HERE
margin: const EdgeInsets.symmetric(
vertical: 20, horizontal: 10),
decoration: BoxDecoration(
shape: BoxShape.circle,
border:
Border.all(color: Colors.grey[400]!),
image: DecorationImage(...
),
}
The answer is in the error itself. When the column is inside a view that is scrollable, the column is trying to shrink-wrap its content but since you used Expanded as a child of the column it is working opposite to the column trying to shrink-wrap its children. This is causing this error because these two directives are completely opposite to each other.
As mentioned in the error logs try the following:
Consider setting mainAxisSize to MainAxisSize.min (for column) and using FlexFit.loose fits for the flexible(use Flexible rather than Expanded).
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(),
]
)
]
)
I am new to flutter. I trying to design as in the image below. But I could not align the items inside the Row and could not give shape to like the layout below in the image. I have tried giving properties like mainAxisAlignment and crossAxisAlignment but could not get the expected result as in the image below.
Only I could able to get Image below.
I have implemented my code as follows:
Container(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Checkbox(
checkColor: Colors.white,
activeColor: Colors.green,
value: true,
onChanged: (value) {
print(value);
}),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.all(
Radius.circular(20))),
child: Image.network(
bannerWomenFashion[i],
height: 100,
width: 100,
fit: BoxFit.scaleDown,
)),
SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.start,
children: <Widget>[
Text(
"Rs 1200",
style: TextStyle(
color: CustomColor
.themeSecondary,
fontSize: 18,
fontWeight:
FontWeight.bold),
),
SizedBox(
height: 5,
),
Text(
"The Pursuit of Happiness",
style: TextStyle(
color: Colors.blueGrey,
fontSize: 20,
fontWeight:
FontWeight.bold),
),
SizedBox(
height: 5,
),
Text("ID: #254217",
style: cartBlueGreyStyle),
],
),
),
Expanded(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment:
CrossAxisAlignment.end,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.remove,
size: 25,
color: Colors.blueGrey,
),
Container(
width: 30,
height: 25,
decoration: BoxDecoration(
borderRadius:
BorderRadius
.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(
color:
Colors.grey,
spreadRadius: 2),
],
),
child: Center(
child: Text("1"))),
Icon(
Icons.add,
size: 25,
color: Colors.blueGrey,
),
],
),
],
)),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(20),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.white,
spreadRadius: 2),
],
),
child: Center(
child: Icon(Icons.clear,
color: Colors.blueGrey),
)),
],
),
],
),
);
Container(
padding: EdgeInsets.all(32.0),
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Stack(
overflow: Overflow.visible,
children: [
Container(
padding: EdgeInsets.all( 8.0),
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(12))),
child: Image.network(
'http://covertopia.com/wp-content/uploads/2015/05/000227_Alt.jpg'
/*bannerWomenFashion[i]*/,
height: 100,
fit: BoxFit.scaleDown,
)),
Positioned(
top: -12,
left: -12,
child: Container(
width: 32,
height: 32,
decoration: BoxDecoration(color: Colors.green, borderRadius: BorderRadius.all(Radius.circular(12))),
child: Checkbox(
checkColor: Colors.white,
activeColor: Colors.green,
value: true,
onChanged: (value) {
print(value);
}),
),
)
],
),
SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Rs 1200",
style: TextStyle(
color: Colors.red /*CustomColor
.themeSecondary*/
,
fontSize: 18,
fontWeight: FontWeight.bold),
),
SizedBox(height: 10,),
Expanded(
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"The Pursuit of Happiness",
style: TextStyle(color: Colors.blueGrey, fontSize: 20, fontWeight: FontWeight.bold),
),
),
),
SizedBox(height: 10,),
Row(
children: [
Text("ID: #254217", style: TextStyle(color: Colors.grey, fontWeight: FontWeight.bold) /*cartBlueGreyStyle*/),
Spacer(),
Row(
children: <Widget>[
Icon(
Icons.remove,
size: 25,
color: Colors.blueGrey,
),
Container(
width: 30,
height: 25,
margin: EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.blueGrey.withOpacity(0.1), spreadRadius: 2),
],
),
child: Center(child: Text("1"))),
Icon(
Icons.add,
size: 25,
color: Colors.blueGrey,
),
],
)
],
),
],
),
),
Container(
width: 30,
height: 30,
margin: EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.white, spreadRadius: 2),
],
),
child: Center(
child: Icon(Icons.clear, color: Colors.blueGrey,size: 16,),
)),
],
),
),
);
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.
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),
),
],
),
),
),
],
)),
),
),
),
]),
);