How to add an Icon left of text inside container - flutter

I have the following below widget:
Widget get _animatedButtonUI => Container(
height: 60,
width: 290,
decoration: BoxDecoration(
border: Border.all(
color: Color(0xFF9EC33B),
),
borderRadius: BorderRadius.circular(100.0),
color: Colors.white,
),
child: Center(
child: Text(
'COTINUE WITH GOOGLE',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.bold,
color: Color(0xFF9EC33B),
),
),
),
);
as it was looks like the below figure:
Now I need to add Icon left of the Text as the below image:
So how can I do this....


You just have to insert a Row inside the Container, just like this:
Container(
height: 60,
width: 290,
decoration: BoxDecoration(
border: Border.all(
color: Color(0xFF9EC33B),
),
borderRadius: BorderRadius.circular(100.0),
color: Colors.white,
),
child: Row(
children: <Widget>[
Image.asset(yourImage),
Center(
child: Text(
'COTINUE WITH GOOGLE',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.bold,
color: Color(0xFF9EC33B),
),
),
),
],
);
Edit: Make sure you fix that typo ("COTINUE WITH GOOGLE" => "CONTINUE WITH GOOGLE")

Related

how to set fix size of gridiew on random text

child: Card(
elevation: 10,
child: Container(
decoration: BoxDecoration(
color: Colors.black87,
borderRadius: BorderRadius.circular(7)),
height: 50,
width: 50,
margin: EdgeInsets.all(5),
child: Center(
child: Text(
"${toplist[index]}".toUpperCase(),
style: TextStyle(
fontSize: 20,
fontFamily: "regular",
color: Colors.white,
fontWeight: FontWeight.bold),
)),
),
),
every time change value of the text in gridview and change the container size, I get a fixed size of the container on every random text.

Put your (Card) Widget inside a (FittedBox) Widget, and select (scaleDown) to your (fit option) as you see below in the code sample.
FittedBox(
fit: BoxFit.scaleDown,
child: Card(
elevation: 10,
child: Container(
decoration: BoxDecoration(
color: Colors.black87,
borderRadius: BorderRadius.circular(7)),
height: 50,
width: 50,
margin: EdgeInsets.all(5),
child: Center(
child: Text(
"${toplist[index]}".toUpperCase(),
style: TextStyle(
fontSize: 20,
fontFamily: "regular",
color: Colors.white,
fontWeight: FontWeight.bold),
)),
),
),
),

Flutter screen overflow from bottom

I have a simple page in which I am using SingleChildScrollView to scroll the page so it will not show overflow and show the content of the bottom.
But it's showing an error also the page is not scrollable due to which I can't see the bottom 2 buttons
My code
SingleChildScrollView(
child: Container(
height: Height * 1,
child: Column(
children: <Widget>[
Container(
color: kPrimaryColor,
child: Column(
children: [
SizedBox(
height: Status * 1,
),
SizedBox(
height: Height * 0.065,
),
Padding(
padding: const EdgeInsets.only(left: 13, bottom: 13),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Create Account',
style: TextStyle(
color: Colors.white,
fontSize: 30,
fontFamily: 'SegoeUI-SemiBold'),
),
),
),
Padding(
padding: const EdgeInsets.only(left: 13),
child: Text(
"Please create an account in order to start using your StalkMe Profile.",
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontFamily: 'SegoeUI'),
),
),
SizedBox(
height: Height * 0.04,
),
],
),
),
Expanded(
child: Container(
color: kPrimaryColor,
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30))),
child: Form(
key: _formKey,
child: Column(
children: [
GestureDetector(
onTap: () {
print('Login print');
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => LoginScreen()),
);
},
child: Padding(
padding: const EdgeInsets.only(
top: 17, right: 17, bottom: 17),
child: Align(
alignment: Alignment.centerRight,
child: Text(
'LOGIN',
style: TextStyle(
color: kPrimaryColor,
fontSize: 16,
fontFamily: 'SegoeUI-SemiBold',
),
)),
),
),
Container(
height: 1,
width: double.infinity,
color: Color(0xffE6E6E6),
),
SizedBox(
height: Height * 0.03,
),
Container(
width: Width * 0.9,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Name',
style: TextStyle(
color: textGreyColor,
fontSize: 16,
fontFamily: 'SegoeUI'),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 11),
child: Container(
width: Width * 0.9,
child: TextFormField(
controller: userName,
validator: (value) {
if (value!.isEmpty) {
return 'Please enter a name';
}
return null;
},
style: TextStyle(
color: textGreyColor,
fontFamily: 'SegoeUI'),
decoration: new InputDecoration(
enabledBorder: new OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
),
filled: true,
hintStyle: new TextStyle(
color: textGreyColor, fontSize: 15),
hintText: "Enter Name",
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
),
),
),
),
SizedBox(
height: Height * 0.02,
),
Container(
width: Width * 0.9,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Email Address',
style: TextStyle(
color: textGreyColor,
fontSize: 16,
fontFamily: 'SegoeUI'),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 11),
child: Container(
width: Width * 0.9,
child: TextFormField(
controller: userEmail,
validator: (value) {
if (value!.isEmpty || !value.contains('#')) {
return 'Please enter a valid email address';
}
return null;
},
style: TextStyle(
color: textGreyColor,
fontFamily: 'SegoeUI'),
decoration: new InputDecoration(
enabledBorder: new OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
),
filled: true,
hintStyle: new TextStyle(
color: textGreyColor, fontSize: 15),
hintText: "Enter Email Address",
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
),
),
),
),
SizedBox(
height: Height * 0.02,
),
Container(
width: Width * 0.9,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Password',
style: TextStyle(
color: textGreyColor,
fontSize: 16,
fontFamily: 'SegoeUI'),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 11),
child: Container(
width: Width * 0.9,
child: TextFormField(
controller: userPassword,
validator: (value) {
if (value!.isEmpty || value.length < 6) {
return 'Please enter a 6 digit password';
}
return null;
},
obscureText: true,
key: ValueKey('name'),
style: TextStyle(
color: textGreyColor,
fontFamily: 'SegoeUI'),
decoration: new InputDecoration(
enabledBorder: new OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
),
filled: true,
hintStyle: new TextStyle(
color: textGreyColor, fontSize: 15),
hintText: "Enter Password",
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
),
),
),
),
SizedBox(
height: Height * 0.02,
),
Spacer(),
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Container(
width: Width * 0.9,
height: Height * 0.06,
decoration: BoxDecoration(
color: Color(0xffebf7f7),
borderRadius: BorderRadius.circular(5)),
child: Center(
child: Text(
'GO BACK',
style: TextStyle(
color: kPrimaryColor,
fontSize: 16,
fontFamily: 'SegoeUI'),
),
),
),
),
GestureDetector(
child: Padding(
padding:
const EdgeInsets.only(top: 8, bottom: 18),
child: Container(
width: Width * 0.9,
height: Height * 0.06,
decoration: BoxDecoration(
color: kPrimaryColor,
borderRadius: BorderRadius.circular(5)),
child: Center(
child: Text(
'CREATE ACCOUNT',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontFamily: 'SegoeUI'),
),
),
),
),
),
],
),
),
),
),
),
],
),
),
),
On small devices, it's not scrollable I try everything to try to give full height but now nothing works for me.

Try putting the Column directly below the SingleChildScrollView.
Like this:
SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
color: kPrimaryColor,
height: Height * 1, // if its still needed
child: Column(

Remove the first container(Wrapped by SingleChildScrollView with height, "height: Height * 1")
Remove the Expanded widget.
Give required size to enbounded Container(
Container with color: kPrimaryColor,)

How to remove the RenderFlex error in flutter for column with listview.builder?

I am building the column in flutter as below code which has a nested ListView.Builder,
but it is giving display error of RenderFlex, how should I resolve it?
A RenderFlex overflowed by 116 pixels on the bottom.
Column(
children: [
SizedBox(height: 25,),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
//order container
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('Order Date',
style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),
),
),
),
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('19 May 2020'),
),
),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('Party',
style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),),
),
),
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('Vardhman Textiles Ltd', style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),),
),
),
],),
],),
SizedBox(height: 30,),
ListView.separated(
separatorBuilder:
(BuildContext context, int index) {
return SizedBox(
height: 16,
);
},
shrinkWrap: true,
itemCount: snapshot.data.content[key].length,
itemBuilder: (context, index) {
return Column(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 40,
width: 320,
decoration: BoxDecoration(
color: Color(0xFFFF0000),
border: Border.all(
color: Color(0xFFFF0000),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('ITEM DETAILS - ' + "1/2",
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold,
fontFamily: 'Roboto',
fontSize: 20,
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
// crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text("Catalog Item", style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),
),
),
),
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text(snapshot
.data.content[key][index][0].sodPk, style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),
),
),
),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('QTY.', style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),
),
),
),
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('10', style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),),
),
),
],),
],
),
],
);
},
)
],
)
Please guide me as I am new to the flutter learning, thanks, I am trying to use Stack, but no good,
When I used stack the first child column was overlapped by the listview.builder, so removed it,
Please guide me the resolution

You can try wrap your ListView.separated with Expanded Widget. What expanded do is expands a child of a Row, Column, or Flex so that the child fills the available space. So it won't overflow

How to make text align to centre of a Sizedbox in Flutter

i use text inside a sizedbox in flutter and the text is sticked to the top of the box how can i put the text in the middle of the box.
child: Container(
width: 240.0,
height: 42.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24.0),
color: const Color(0xff2c2c2c),
),
child: SizedBox(
child: Text(
'SIGN UP',
style: TextStyle(
fontFamily: 'Arial',
fontSize: 18,
color: Colors.white,
height: 1,
),
textAlign: TextAlign.center,
),
),
),

Wrap the Text in a Center widget
child: Container(
width: 240.0,
height: 42.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24.0),
color: const Color(0xff2c2c2c),
),
child: Center(
child: Text(
'SIGN UP',
style: TextStyle(
fontFamily: 'Arial',
fontSize: 18,
color: Colors.white,
height: 1,
),
textAlign: TextAlign.center,
),
),
),
Also, as far I can tell, you can remove the SizedBox widget, This is the result

Why it is not changing the heigth and width of the button

InkWell(
borderRadius: BorderRadius.all(Radius.circular(5)),
onTap: () {},
child: SizedBox(
height: 25,
width: screenWidth *65,
child: Container(
color: Colors.blueAccent,
child: Text(
'Confirm',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
color: Color(0xff000000),
fontWeight: FontWeight.w500),
),
),
),
),

Is this what you are looking for?
Container(
padding: EdgeInsets.all(6),
width: double.infinity,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(5))
),
color: Colors.blueAccent,
onPressed: () => print('pressed'),
child: Text('Confirm',
style: TextStyle(
fontSize: 15,
color: Color(0xff000000),
fontWeight: FontWeight.w500
),
)
),
),

Remove SizedBox widget as it not of any issue in your current widget tree anyway as you are using container already
and use those height and width parameter inside container widget
try this
InkWell(
borderRadius: BorderRadius.all(Radius.circular(5)),
onTap: () {},
child: Container(
height: 25,
width: screenWidth *65,
color: Colors.blueAccent,
child: Text(
'Confirm',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
color: Color(0xff000000),
fontWeight: FontWeight.w500),
),
),
),