I want to center the Row widget in Container but can't do it.
Desire Design
My desire Design look like this : -
but I'm getting this output
My Output : -
Here is my code : -
Container(
height: Dimensions.height40,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(Dimensions.radius10), color: Colors.white),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: Dimensions.width45),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.asset("assets/images/g.png", width: Dimensions.width20 + 5),
SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)
],
),
),
),
SmallText
class SmallText extends StatelessWidget {
final Color? color;
final String text;
final double size;
final TextAlign? align;
const SmallText({
Key? key,
this.color = const Color(0xffCF1357),
this.size = 16,
required this.text, this.align=TextAlign.center,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Text(
text,
textAlign: align,
style: TextStyle(
color: color, fontSize: size, fontFamily: 'ROCK'),
);
}
}
Replace your Row widget
From
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.asset("assets/images/g.png", width: Dimensions.width20 + 5),
SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)
],
),
To
Row(
children: [
Icon(Icons.chevron_right_outlined, color: Colors.red),
Expanded(
child: Text(
"asdfasdfasdfadsfadsf",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red, fontSize: 12, fontFamily: 'ROCK'),
),
),
],
),
try this way...
Container(
height: Dimensions.height40,
decoration:
BoxDecoration(borderRadius: BorderRadius.circular(Dimensions.radius10), color: Colors.white),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: Dimensions.width45),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Image.asset("assets/images/g.png", width: Dimensions.width20 + 5),
),
SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)
// if text overflowing
// Expanded(child: Text('text', maxLines: 2)),
],
),
),
),
Try below code:
ElevatedButton(
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.network(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTffY2_D5YjjG8Mn3NnOFrXG2Piu72Ff5rbyHiyZXFvkWWtE3pLojAwOXpxAbC7PZa0JpU&usqp=CAU',
height: 40,
), //use your google image here
Text(
'Sign in with Google',
style: TextStyle(
color: Colors.black,
),
),
SizedBox()
],
),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white, fixedSize: const Size(250, 50)),
),
Result->
Related
I don't know what I did wrong.
import 'package:flutter/material.dart';
import 'package:nle_app/models/stall.dart';
import 'package:nle_app/constants/colors.dart';
class StallInfo extends StatelessWidget {
final stall = Stall.generateRestaurant();
#override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.only(top: 40),
padding: const EdgeInsets.symmetric(horizontal: 25),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
stall.name,
style: const TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 10),
Row(
children: [
Container(
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
color: Colors.blueGrey.withOpacity(0.4),
borderRadius: BorderRadius.circular(5),
),
child: Text(
stall.label,
style: const TextStyle(
color: Colors.white,
),
)),
const SizedBox(
width: 10,
),
],
)
],
),
ClipRRect(
borderRadius: BorderRadius.circular(50),
child: Image.asset(
stall.logoUrl,
width: 80,
),
),
],
),
const SizedBox(
height: 5,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
stall.desc,
style: const TextStyle(fontSize: 16),
),
Row(
children: [
const Icon(
Icons.star_outline,
color: Colors.amber,
),
Text(
'${stall.score}',
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const SizedBox(width: 15),
],
)
],
)
],
),
);
}
}
The image I uploaded shows what its suppossed to look like but in case you missed it, it's supposed to look like .
I thought maybe the image overflowed to the right but even when I remove the image it's the same thing.
I've tested it on different devices but it's all the same. It doesn't even throw an exception or anything. Does anyone know how to fix this.
It is missing material, Check if the parent widget contains Scaffold. Also for this one , you can wrap with any material widget like Material, Card,Scaffold....
Widget build(BuildContext context) {
return Material(
child: Container(
```
This is my code and I tried to make it stick to the bottom right as in the attachment image but I can't seem to accomplish that. I tried to use the Row Widget to position it at the end but it doesn't seem to do much. Any tips since I'm new to the mobile development world?
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class MenuCard extends StatelessWidget {
const MenuCard({
Key? key,
required this.cardTitle,
required this.pageDestination,
required this.imageSource, required this.cardColor,
}) : super(key: key);
final String cardTitle;
final Widget pageDestination;
final String imageSource;
final Color cardColor;
#override
Widget build(BuildContext context) {
return GestureDetector(
child: Padding(
padding: const EdgeInsets.only(right: 10),
child: Container(
padding:
const EdgeInsets.only(left: 20, right: 20, bottom: 20, top: 50),
width: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: cardColor,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
cardTitle,
style: GoogleFonts.quicksand(
textStyle: const TextStyle(
fontSize: 25,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Image.asset(
imageSource,
width: 75,
height: 75,
),
],
)
],
),
),
),
);
}
}
Set the image as a Container background image, then set the DecorationImage alignment property to bottomRight & fit property to BoxFit.none
Sample:
GestureDetector(
onTap: () {},
child: Container(
padding: const EdgeInsets.fromLTRB(20, 20, 20, 100),
width: 200,
decoration: BoxDecoration(
image: DecorationImage( //this
image: AssetImage(imageSource),
fit: BoxFit.none,//this
alignment: Alignment.bottomRight, //this
),
borderRadius: BorderRadius.circular(15),
color: cardColor,
),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
cardTitle,
style: const TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
const Text(
"2.9GB",
style: TextStyle(
fontSize: 12,
color: Colors.white54,
fontWeight: FontWeight.bold,
),
),
],
),
),
);
Code snippet here.
i am a beginner in flutter , i am trying to correct the display of this widget in flutter ,
the problem is that this widget is not responsive where the name of the teams when they are long they can make the screen out of range , and also the time and date zone is not always centered , i am searching how to make the date and the time zone always centered in the screen in all the cases , how to replace the padding ? by container?? what prosperities to change???
my goal is to make the date and the time centered in all the cases and my second goal is to find a solution for the width of screen when the name of teams are long
here my widget class :
import 'package:flutter/material.dart';
class BroadcastSchedule extends StatelessWidget {
String home;
String homeImage;
String away;
String awayImage;
String time;
String date;
BroadcastSchedule(this.home,this.homeImage,this.away,this.awayImage,this.time,this.date);
#override
Widget build(BuildContext context) {
return Card(
elevation: 4.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child:
Row(
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(this.homeImage),
),
const SizedBox(width:10.0),
Spacer(),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget> [
Text(this.home),
const SizedBox(height: 5.0, ),
],
),
Padding(
padding: EdgeInsets.only(top:20.0, left: 20.0, right: 20.0),
child: Container(
padding: EdgeInsets.all(2.0),
decoration: BoxDecoration(
color: Colors.grey[700],
borderRadius: BorderRadius.circular(11.0),
),
child: Column(
children: [
Text(this.time,style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.white,
),),
const SizedBox(height: 5.0, ),
Text(this.date,style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
color: Colors.white
),),
],
),
),
),
Expanded(
child : Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget> [
Text(this.away),
const SizedBox(height: 5.0, ),
],
),
),
Spacer(),
CircleAvatar(
backgroundImage: NetworkImage(this.awayImage),
),
],
),
),
);
}
}
here the screen capture :
how can we replace padding that contains the date and time of a match by something that will be centered in all the cases
I Think you're looking for this.
final Result Looks like this.
Final Ouput
class BroadcastSchedule extends StatelessWidget {
final String home;
final String homeImage;
final String away;
final String awayImage;
final String time;
final String date;
BroadcastSchedule({
this.home,
this.homeImage,
this.away,
this.awayImage,
this.time,
this.date,
});
#override
Widget build(BuildContext context) {
return Card(
elevation: 4.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Row(
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(this.homeImage),
),
SizedBox(
width: 10.0,
),
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(this.home),
const SizedBox(
height: 5.0,
),
],
),
),
],
),
),
Expanded(
flex: 1,
child: Padding(
padding: EdgeInsets.only(top: 20.0, left: 20.0, right: 20.0),
child: Container(
padding: EdgeInsets.all(2.0),
decoration: BoxDecoration(
color: Colors.grey[700],
borderRadius: BorderRadius.circular(11.0),
),
child: Column(
children: [
Text(
this.time,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.white,
),
),
const SizedBox(
height: 5.0,
),
Text(
this.date,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
color: Colors.white),
),
],
),
),
),
),
Expanded(
flex: 1,
child: Row(
children: [
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
this.away,
overflow: TextOverflow.fade,
),
SizedBox(
height: 5.0,
),
],
),
),
CircleAvatar(
backgroundImage: NetworkImage(this.awayImage),
),
],
),
),
],
),
),
);
}
}
Column(crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget> [
Text(this.home),
const SizedBox(height: 5.0, ),
],
),
Please change it. Don't use the column it's unneccessary.
Instead, You can use a container of fixed-sized (fixed height and width). So, that it can wrap text according to its length.
The problem caused by the length of this.home string. You can wrap that text inside the container of fixed length. so, that your date and time is shown always at the center.
Try this code,
import 'package:flutter/material.dart';
class BroadcastSchedule extends StatelessWidget {
String home;
String homeImage;
String away;
String awayImage;
String time;
String date;
BroadcastSchedule(this.home,this.homeImage,this.away,this.awayImage,this.time,this.date);
#override
Widget build(BuildContext context) {
return Card(
elevation: 4.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child:
Row(
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(this.homeImage),
),
const SizedBox(width:10.0),
Spacer(),
Container(
width: MediaQuery.of(context).size.width * 0.22,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget> [
Text(this.home,softWrap: true,),
const SizedBox(height: 5.0, ),
],
),
),
Padding(
padding: EdgeInsets.only(top:20.0, left: 20.0, right: 20.0),
child: Container(
padding: EdgeInsets.all(2.0),
decoration: BoxDecoration(
color: Colors.grey[700],
borderRadius: BorderRadius.circular(11.0),
),
child: Column(
children: [
Text(this.time,style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.white,
),),
const SizedBox(height: 5.0, ),
Text(this.date,style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
color: Colors.white
),),
],
),
),
),
Expanded(
child : Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget> [
Text(this.away),
const SizedBox(height: 5.0, ),
],
),
),
Spacer(),
CircleAvatar(
backgroundImage: NetworkImage(this.awayImage),
),
],
),
),
);
}
}
IF it's not center try to change the length of the container.
I have issue my screen showing orange line in end and show ing error of A Renderflex overflowed by 5105 pixels on the bottom .
My code
class Orderlist extends StatelessWidget {
final posts;
Orderlist({Key key, this.posts}) : super(key: key);
#override
Widget build(BuildContext context) {
double stackWidth = MediaQuery.of(context).size.width;
double stackHeight = MediaQuery.of(context).size.height;
return SingleChildScrollView(
child: Column(
children: [
test(),
test(),
test(),
test(),
test()
],
),
);
}
}
class test extends StatelessWidget {
#override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return Container(
color: Color(0xfff6f6f6),
child: Padding(
padding: const EdgeInsets.all(14.0),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
color: Color(0xfff8f8f8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'asdada',
style: TextStyle(
fontFamily: 'SFPROBOLD',
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.bold),
),
Text(
'asda'
.toString(),
style: TextStyle(
color: Colors.grey, fontSize: 14))
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: width * 0.13,
decoration: BoxDecoration(
color: Color(0xffef9500),
borderRadius: BorderRadius.all(
Radius.circular(5))),
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Center(
child: Text('Pending',
style: TextStyle(
fontFamily: 'SFPROBOLD',
color: Colors.white,
fontSize: 9))),
),
),
),
],
),
),
),
Padding(
padding: const EdgeInsets.all(13.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text(
'Delivery',
style: TextStyle(
fontFamily: 'SFPROBOLD',
color: Color(0xffea6c7b),
fontSize: 13),
),
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Text(
'asdada',
style: TextStyle(fontSize: 15),
),
),
IconButton(
icon: Icon(
Icons.arrow_forward,
color: Colors.grey,
),
onPressed: () {
// do something
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
OrderDetails()),
);
},
)
],
)
],
),
)
],
),
),
),
);
}
}
Try to wrap the first widget with SingleScrollview but its not working. Also try to wrap the Listviewbuilder but still showing pixels error and if i wrap SignleScrollview with expanded then its showing parent directory error
I think the error is because you wrapped the column in ListView as well as SingleChildScrollView. Try removing any one of them.
I'm re-writing my application written in Kotlin to Flutter, but I'm struggling with simple layout.
I'm trying to re-create layout from Gmail, but I don't know how to position some things.
This is an image from the Kotlin app:
This is an image from my Flutter app:
I'm talking about the "odebrane" text. I want it to be exactly like in my Kotlin app. I want the text inside it to be centered and I want it to be on the exact height to the "Voucher" text. Is there anyone who can help me?
Code:
import 'package:flutter/material.dart';
class GeneratedMailCouponScreen extends StatelessWidget {
final String couponImage;
GeneratedMailCouponScreen({Key key, #required this.couponImage}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Icon(
Icons.arrow_back
)
],
),
Row(
children: [
Icon(
Icons.archive
),
SizedBox(width: 5.0),
Icon(
Icons.delete
),
SizedBox(width: 5.0),
Icon(
Icons.mail
),
SizedBox(width: 5.0),
Icon(
Icons.more_vert
)
],
)
],
),
SizedBox(height: 16.0),
Row(
children: [
Text('Voucher', style: TextStyle(color: Colors.black, fontSize: 20.0)),
SizedBox(width: 16.0,),
Container(
color: Colors.grey[300],
width: 50.0,
height: 8.0,
child: Center(
child: Text('Odebrane', style: TextStyle(color: Colors.black, fontSize: 8.0),),
)
)
],
)
],
),
),
),
);
}
}
After test on device, this is my solution
You only need to change few line of code
// from
Container(
color: Colors.grey[300],
width: 50.0,
height: 8.0,
child: Center(
child: Text('Odebrane', style: TextStyle(color: Colors.black, fontSize: 8.0),),
)
)
// to
Container(
color: Colors.grey[300],
child: Padding(
padding: EdgeInsets.fromLTRB(4, 2, 4, 2),
child: Text('Odebrane', style: TextStyle(color: Colors.black, fontSize: 10.0),),
)
)