i would like to have the title exactly in the center of the screen and not the same distance between the other two row children.
Currently I have a row with mainAxisAlignment set to spaceBetween but this is not what I am looking for.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 35,
height: 35,
decoration: const BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(image: NetworkImage("...")),
color: Colors.white),
),
const Text(
"TITLE",
style: TextStyle(
fontFamily: "IBM",
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.black,
),
),
Timer(),
],
If you like to have appBar, use centerTitle: true, on appBar.
appBar: AppBar(
title: Text("C"),
centerTitle: true,
leading: Container(
width: 35,
height: 35,
decoration: const BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(image: NetworkImage("...")),
color: Color.fromARGB(255, 24, 11, 11)),
),
actions: [
CircleAvatar(
backgroundColor: Colors.red,
),
],
),
While the height is fixed, you can use Stack widget.
SizedBox(
width: MediaQuery.of(context).size.width,
height: 35,
child: Stack(
children: [
Align(
alignment: Alignment.centerLeft,
child: Container(
width: 35,
height: 35,
decoration: const BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(image: NetworkImage("...")),
color: Color.fromARGB(255, 24, 11, 11)),
),
),
Align(
alignment: Alignment.center,
child: const Text(
"TITLE",
style: TextStyle(
fontFamily: "IBM",
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.black,
),
),
),
Align(
alignment: Alignment.centerRight,
child: CircleAvatar(
backgroundColor: Colors.red,
),
)
],
),
),
You can also use Positioned widget to align the items.
To have TITLE centered in this case you should make the right and left Widget having the same width. You can wrap them in a SizedBox
Related
I tried to code this all the way I can, but It's still can't move .
I tried to wrap this all in stack and I put the picture as second child, even if i adjust the container width, the image can't get out of the card, and the card padding is stuck there, I can't change anything, how do i fix that
here is the example design
here is my code
children: [
SizedBox(height: 37),
const Text("Hey Mishal,",
style: TextStyle(
fontSize: 26,
color: Color(0xFF0D1333),
fontWeight: FontWeight.bold,
)),
const Text("Find a course you want to learn",
style: TextStyle(
fontSize: 20,
color: Color(0xFF61688B),
height: 2,
)),
Container(
height: 150,
width: 357,
alignment: Alignment.topLeft,
margin: const EdgeInsets.symmetric(vertical: 30),
decoration: BoxDecoration(
color: kDeepBlueTheme,
borderRadius: BorderRadius.circular(15)),
child: Stack(
children: [
Card(
color: Colors.blueAccent,
child: Padding(
padding: const EdgeInsets.only(left: 15, top: 23),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// SizedBox(height: 30, width: 100,),
const Text('50% off',
style: TextStyle(
color: Colors.white,
fontSize: 27,
fontWeight: FontWeight.bold)),
const SizedBox(
height: 5,
),
const Text('For Any Courses',
style: TextStyle(
letterSpacing: 2,
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.w300)),
const SizedBox(
height: 6,
),
ElevatedButton(
//on pressed
onPressed: () async {},
//text to shoe in to the button
child: const Text('Join Now!',
style: TextStyle(color: kMainTheme)),
//style section code here
style: ButtonStyle(
elevation:
MaterialStateProperty.all<double>(0),
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
)),
backgroundColor:
MaterialStateProperty.all<Color>(
Colors.black),
),
),
]),
),
),
Positioned(
bottom: 1,
left: 100,
child: Image.asset(
'assets/person_home.png',
height: 230,
),
)
],
),
),
],
and here is my result ,
how can I achieve that ?
Wrap your Stack with a SizedBox and give it a height greater than the height of Card, use media query heights to make it responsive.
SizedBox(
height: 220,
child: Stack(
alignment: Alignment.bottomCenter,
children: [
Container(
height: 200,
width: double.infinity,
padding: const EdgeInsets.all(8.0),
child: Card(
color: Colors.blueAccent,
child: Padding(
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('50% off',
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.bold)),
const SizedBox(
height: 5,
),
const Text('For Any Courses',
style: TextStyle(
letterSpacing: 2,
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w300)),
const SizedBox(
height: 6,
),
ElevatedButton(
//on pressed
onPressed: () async {},
//text to shoe in to the button
child: const Text('Join Now!',
style: TextStyle(color: Colors.white)),
//style section code here
style: ButtonStyle(
elevation: MaterialStateProperty.all<double>(0),
shape:
MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
)),
backgroundColor:
MaterialStateProperty.all<Color>(Colors.black),
),
),
]),
),
),
),
Positioned(
right: 0,
top: 0,
child: Image.network(
'https://i.ibb.co/7Kr3Vc2/Screenshot-2022-02-23-at-6-11-05-PM-removebg-preview.png',
fit: BoxFit.cover,
height: 210,
),
)
],
),
),
Try This Result Will be like in pic..
Stack(
children: [
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 400,
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.blueGrey,
),
),
),
Row(
children: [
const Padding(
padding:EdgeInsets.only(left: 20,right: 5),
child: Text('hello'),
),
Spacer(),
SizedBox(
height: 700,
child: Image.asset('assets/images/place_holder_avatar.png',fit: BoxFit.cover,),
),
],
),
],
)
I'm trying to make the barcode above the qrcode and I will like to make them in the same container, how should I edit it?
Thanks Alot!
body: SafeArea(
child: Center(
child: Column(
children: [
SizedBox(
height: 50,
child: SfBarcodeGenerator(
value: 'www.syncfusion.com',
),
),
Container(
decoration: BoxDecoration(
color: mFillColor,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: mBorderColor, width: 1),
),
margin: const EdgeInsets.only(left: 30, right: 30),
width: double.infinity,
height: 350,
child: Padding(
padding: const EdgeInsets.all(90.0),
child: QrImage(
data: 'This is a simple QR code',
version: QrVersions.auto,
gapless: false,
),
),
),
],
),
),
),
What this code will show:
The effect that I want:
This is how you do this task. First you design a parent Container and then use a Column widget which contains two sizedBox as a children one is for barcode and second is for QrCode. Just like this
Scaffold(
body: SafeArea(
child: Container(
height: 250,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.black, width: 1),
),
margin: const EdgeInsets.all(30),
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
height: 50,
child: SfBarcodeGenerator(
value: 'www.syncfusion.com',
),
),
const Text(
"2810 1102 0604 3155 4434 2047",
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.w500,
),
),
SizedBox(
height: 150,
child: QrImage(
data: 'This is a simple QR code',
version: QrVersions.auto,
gapless: false,
),
),
const Text(
"Any text here",
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.w500,
),
),
],
),
),
),
)
I'm new to flutter, I'm trying to change size of a container, but it not change even i change height:150 and width=150, I just want green screen show about 1/5 screen, but i really don't know how to fix this. I don't understand why, when changing the height and width of the Container, nothing will change
here is code
return Container(
decoration: new BoxDecoration(color: Colors.white),
child: new MaterialApp(
title: "Sample",
debugShowCheckedModeBanner: false,
home: Container(
height: 150.0,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30),
)),
child: Stack(
children: [
Positioned(
top: 150,
left: 0,
child: Row(
children: <Widget>[
SvgPicture.asset(
user,
width: 60,
height: 60,
),
SizedBox(
width: 10,
),
Text(
"Welcome back, $username",
style: TextStyle(
fontSize: 20,
fontFamily: fontRegular,
decoration: TextDecoration.none,
color: Colors.white,
),
),
SizedBox(
width: 10,
),
Container(
padding: const EdgeInsets.all(5.0),
decoration: BoxDecoration(
border: Border.all(width: 1.5, color: Colors.black),
color: Color.fromRGBO(230, 230, 230, 1),
borderRadius: BorderRadius.circular(30),
),
child: Row(
children: [
SvgPicture.asset(
"assert\\dollar.svg",
height: 25,
width: 25,
),
Text(
'$coinValue',
style: TextStyle(
fontSize: 18,
color: Colors.black,
decoration: TextDecoration.none),
),
],
),
),
SizedBox(
width: 13,
),
],
),
),
],
),
),
),
);
}
Here is result
i just want something like this
hope this helps you:
Add Scaffold around the inner container (the one with height 150 )... and you don't need the stack and positioned(the content won't show up if you don't remove them):
MaterialApp(
title: "Sample",
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Container(
height: 150.0,
decoration: ...
Rewrite your code as below:
home: Scaffold(
body: SafeArea(
child: Container(
height: 150.0,
decoration: BoxDecoration(
color: Colors.green,
),
child: Row(
children: <Widget>[
SizedBox(
width: 10,
),
Text(
"Welcome back",
style: TextStyle(
fontSize: 20,
//fontFamily: fontRegular,
decoration: TextDecoration.none,
color: Colors.white,
),
),
SizedBox(
width: 10,
),
Container(
padding: const EdgeInsets.all(5.0),
decoration: BoxDecoration(
border: Border.all(width: 1.5, color: Colors.black),
color: Color.fromRGBO(230, 230, 230, 1),
borderRadius: BorderRadius.circular(30),
),
child: Row(
children: [
Text(
'dsfsfsf',
style: TextStyle(
fontSize: 18,
color: Colors.black,
decoration: TextDecoration.none),
),
],
),
),
SizedBox(
width: 13,
),
],
),
),
),
),
You have the Stack widget inside your Container widget. That is why it is taking the whole screen. Try removing the Stack widget.
return Container(
decoration: new BoxDecoration(color: Colors.white),
child: new MaterialApp(
title: "Sample",
debugShowCheckedModeBanner: false,
home: Container(
height: 150.0,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30),
)),
child: Positioned(
top: 150,
left: 0,
child: Row(
children: <Widget>[
SvgPicture.asset(
user,
width: 60,
height: 60,
),
SizedBox(
width: 10,
),
Text(
"Welcome back, $username",
style: TextStyle(
fontSize: 20,
fontFamily: fontRegular,
decoration: TextDecoration.none,
color: Colors.white,
),
),
SizedBox(
width: 10,
),
Container(
padding: const EdgeInsets.all(5.0),
decoration: BoxDecoration(
border: Border.all(width: 1.5, color: Colors.black),
color: Color.fromRGBO(230, 230, 230, 1),
borderRadius: BorderRadius.circular(30),
),
child: Row(
children: [
SvgPicture.asset(
"assert\\dollar.svg",
height: 25,
width: 25,
),
Text(
'$coinValue',
style: TextStyle(
fontSize: 18,
color: Colors.black,
decoration: TextDecoration.none),
),
],
),
),
SizedBox(
width: 13,
),
),
],
),
),
),
);
Do as follows
Container(
height: 150,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(20),
bottomLeft: Radius.circular(20))),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CircleAvatar(
radius: 30.0,
backgroundImage: NetworkImage('https://via.placeholder.com/150'),
backgroundColor: Colors.transparent,
),
Expanded(child:Text("Hey there, Welcome back LQK!")),
Container(
width:100,
padding: const EdgeInsets.all(5.0),
decoration: BoxDecoration(
border: Border.all(width: 1.5, color: Colors.black),
color: Color.fromRGBO(230, 230, 230, 1),
borderRadius: BorderRadius.circular(30),
),
child: Row(
children: [
Icon(Icons.search) //put your desired icon here
],
),
),
],
)
i´ve been coding for a few hours. I´m new in flutter and this error is showing in my project:
A RenderFlex overflowed by 3.0 pixels on the right.
The relevant error-causing widget was
Row
The overflowing RenderFlex has an orientation of Axis.horizontal.
Do you have some solutions how to fix it please
Here is my code below
Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
elevation: 3.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0)
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(
'assets/brownies.jpg',
)
)
),
child: ListTile(
contentPadding: EdgeInsets.fromLTRB(50, 50, 50, 50),
leading: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 250,
minHeight: 250,
maxWidth: 250,
maxHeight: 250,
),
child: Column(
children: [
Text(
'Čokoládové brownies',
style: GoogleFonts.caveat(
fontSize: 25.0,
fontWeight: FontWeight.bold,
),
),
Padding(
padding: const EdgeInsets.only(top: 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.grey.withOpacity(0.5),
),
width: 75,
child: Row(
children: [
Icon(
Icons.access_time,
),
Text(
'45 min.',
overflow: TextOverflow.ellipsis,
softWrap: true,
style: GoogleFonts.poppins(
fontSize: 15.0,
fontWeight: FontWeight.w400,
),
),
],
),
),
)
],
)
),
trailing: Icon(
Icons.arrow_forward_ios,
size: 27.0,
),
onTap: () {
Navigator.push(
context,
PageTransition(child: Brownies(), type: PageTransitionType.rightToLeft),
);
},
),
),
),
It's probably this part :
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.grey.withOpacity(0.5),
),
width: 75,
child: Row(
children: [
Icon(
Icons.access_time,
),
Text(
'45 min.',
overflow: TextOverflow.ellipsis,
softWrap: true,
style: GoogleFonts.poppins(
fontSize: 15.0,
fontWeight: FontWeight.w400,
),
),
],
),
You should not set the width of the container containing the Row.
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.grey.withOpacity(0.5),
),
child: Row(
children: [
I want this result:
I am unable to get the background text to look how I want.
I have tried overflow.clip and other overflows. I am getting overflow error if I try to do that.
My current code produces this:
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
color: Color(0xFF86C232),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(15.0)),
height: 130,
width: 250,
//color: Color(0xFF86c232),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Students',
style: TextStyle(fontSize: 28)),
Text('256',
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold)),
Text(
'256',
style: TextStyle(
fontSize: 154, fontWeight: FontWeight.bold),
overflow: TextOverflow.clip,
softWrap: false,
maxLines: 1,
)
],
),
),
),
I'd rather use CustomPainter, but as a quick solution this works:
Container(
height: 200,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.red,
),
child: Stack(
overflow: Overflow.clip,
fit: StackFit.expand,
alignment: Alignment.center,
children: <Widget>[
Positioned(
child: Text(
'test',
style: TextStyle(fontSize: 120, color: Colors.black.withOpacity(0.2)),
),
bottom: -60,
),
Center(
child: Text('test', style: TextStyle(fontSize: 40))
),
],
),
)