Row with Expanded - flutter

I have 3 widgets in the row
GestureDetector(
onTap: () {},
child: Card(
margin: EdgeInsets.zero,
child: Padding(
padding: EdgeInsets.all(15),
child: Row(
children: <Widget>[
Text(
"Description",
style: TextStyle(fontSize: 15, color: Colors.orange),
),
Spacer(),
Expanded(
child: Text(
descriptionText,
style: TextStyle(fontSize: 15, color: const Color(0xff0000ff)),
),
),
Text(">", style: TextStyle(fontSize: 15, color: Colors.black))
],
),
),
),
)
The UI looked like this
How can I move the All beside > ? If the text is too long, I would like the Text displayed multi line, that why I use Expanded.


You can remove the Expanded, however if there's a need for that, you can use the textAlign property:
Expanded(
child: Text(
'All',
textAlign: TextAlign.right,
),
)
Full solution:
GestureDetector(
onTap: () {},
child: Card(
margin: EdgeInsets.zero,
child: Padding(
padding: EdgeInsets.all(15),
child: Row(
children: <Widget>[
Text(
"Description",
style: TextStyle(fontSize: 15, color: Colors.orange),
),
Spacer(),
Expanded(
child: Text(
descriptionText,
textAlign: TextAlign.right, // <-- You need this
style: TextStyle(fontSize: 15, color: const Color(0xff0000ff)),
),
),
Text(">", style: TextStyle(fontSize: 15, color: Colors.black))
],
),
),
),
)

Related

Wrapping a Row of Texts with Colored Rounded Box

Based on the code below, how does one wrap around a row of texts in a container? (as shown in the image). And also, how to make the container slightly rounded as shown in the image?
When I wrap it in a container, why does it takes up the full width of the app from left to right, which is not what I am trying to achieve.
Thank you in advance.
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
child: Expanded(
child: PageView(
controller: _pageController,
onPageChanged: (page) {
setState(() {
currentIndex = page;
});
},
children: [
SingleChildScrollView(
child: Column(
children: [
Container(
padding: EdgeInsets.only(
top: 0, left: 220, right: 30, bottom: 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Expanded(
flex: 7,
child: Text(
'187,177.33',
style: GoogleFonts.openSans(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
),
SizedBox(width: 10),
Expanded(
flex: 4,
child: Text(
'82',
style: GoogleFonts.openSans(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
),
],
),
),
],
),
),
],
),
),
),
],
),
);
}

Use decoration on Container. Also reduce the padding,
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(12)),
child: Row(
return Scaffold(
body: Column(
children: [
Container(
child: Expanded(
child: PageView(
// controller: _pageController,
onPageChanged: (page) {
setState(() {
// currentIndex = page;
});
},
children: [
SingleChildScrollView(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Expanded(
flex: 7,
child: Text(
'187,177.33',
style: GoogleFonts.openSans(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
),
SizedBox(width: 10),
Expanded(
flex: 4,
child: Text(
'82',
style: GoogleFonts.openSans(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
),
],
),
),
),
],
),
),
],
),
),
),
],
),
);
}
More information about Container and layout

Container has property which called decoration, It would does the job for you, Try this:
Container(
margin: EdgeInsets.all(16),
padding:
EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(8)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'187,177.33',
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
SizedBox(width: 10),
Text(
'82',
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
],
),
)

Add buttons below the body

The code below (I shortened the code for simplicity) displays the characteristics of the device. I placed all the characteristics in the body and displayed them in a certain way. Tell me how I can make two buttons (marked in red in the photo) under the body. Or put them in the body? tell me the best way to do it.
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
),
body: Align(
alignment: Alignment.topCenter,
child: Container(
constraints: const BoxConstraints(maxWidth: 800, maxHeight: 400),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(5.0),),
child: SingleChildScrollView(
child: Card(
child: Column(
children: [
ListTile(
title: const Text('Brand:', style: TextStyle(fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.brand} ', style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 20 ))),
const Divider(color: Colors.black, endIndent: 10, indent: 10),
ListTile(
title: const Text('Operation system:', style: TextStyle(fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.operation_system} ', style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 20 ))),
],
),
),
)
),
));

You can use bottomNavigationBar on Scaffold
Scaffold(
bottomNavigationBar: Padding(
padding: const EdgeInsets.all(8.0), //the one you prefer
child: Row(
children: [
Expanded(
child: OutlinedButton(
onPressed: () {},
child: Text("NNNNNN"),
),
),
SizedBox(
//space between button
width: 16,
),
Expanded(
child: OutlinedButton(
onPressed: () {},
child: Text("NNNNNN"),
),
),
],
),
),
Also, you can wrap Container with Column widget
body: Column(
children: [
Container(...)//your widget
Padding(
padding: const EdgeInsets.all(8.0), //the one you prefer
child: Row(
children: [
Expanded(child: OutlinedButton(...)),
SizedBox(width:x),
Expanded(child: OutlinedButton(...)),
Full snippet on second approach
return Scaffold(
body: Column(
children: [
Container(
constraints: const BoxConstraints(maxWidth: 800, maxHeight: 400),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(5.0),
),
child: SingleChildScrollView(
child: Card(
child: Column(
children: [
ListTile(
title: const Text('Brand:',
style: TextStyle(
fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.brand} ',
style: const TextStyle(
fontWeight: FontWeight.w400, fontSize: 20))),
const Divider(
color: Colors.black, endIndent: 10, indent: 10),
ListTile(
title: const Text('Operation system:',
style: TextStyle(
fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.operation_system} ',
style: const TextStyle(
fontWeight: FontWeight.w400, fontSize: 20))),
],
),
),
)),
// Spacer(), /// you you want at the bottom
Padding(
padding: const EdgeInsets.all(8.0), //the one you prefer
child: Row(
children: [
Expanded(
child: OutlinedButton(
onPressed: () {},
child: Text("NNNNNN"),
),
),
SizedBox(
//space between button
width: 16,
),
Expanded(
child: OutlinedButton(
onPressed: () {},
child: Text("NNNNNN"),
),
),
],
),
)
],
),
);
You can check more about widgets, Column and layout.

Flutter text left alignment

I'm trying to align all the text to left. However, it's in the middle always as you can see the image below. I've tried using Align widget and setting textAlign property on Text widget to TextAlign.left but no luck.
card.dart
Row(
children: <Widget>[
Card(
elevation: 2,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(4)),
child: Image.network('https://loremflickr.com/100/100'),
),
),
Padding(
padding: const EdgeInsets.only(left: 8),
child: Column(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text(
'Marry Jane',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 16),
),
),
Align(
alignment: Alignment.centerLeft,
child: Text(
'Make-up Artist',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 14, color: Color(0xff666666)),
),
),
Row(
children: <Widget>[
Text(
'3.5',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 18, color: Color(0xff666666)),
),
Icon(FontAwesomeIcons.starHalf)
],
)
],
),
)
],
),

Have you tried giving the Column CrossAxisAlignment.start?
Row(
children: <Widget>[
Card(
elevation: 2,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(4)),
child: Image.network('https://loremflickr.com/100/100'),
),
),
Padding(
padding: const EdgeInsets.only(left: 8),
child: Column(
/// Add this
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Marry Jane',
style: TextStyle(fontSize: 16),
),
Text(
'Make-up Artist',
style: TextStyle(fontSize: 14, color: Color(0xff666666)),
),
Text(
'3.5',
style: TextStyle(fontSize: 18, color: Color(0xff666666)),
),
],
),
)
],
)

ListView showing Blank screen in flutter

I want a Background image and above that image some content will be there that should be vertically scrollable so that it should not get outside the image.
THe code is shown below
I am using the satck and one child is Image and the other is listview to acheive this but still not able to find the correct solution..
ListView(
children: <Widget>[
new Stack(
children: <Widget>[
Container(
child: background.Row3
),
Stack(
children: <Widget>[
Center(child: SvgPicture.asset('assets/Receipt.svg',height: 350,width: 200,),),/*************this is the main background image****************/
Padding(padding: EdgeInsets.only(top:100),
child: Column(
mainAxisAlignment:MainAxisAlignment.spaceAround,
children: <Widget>[
ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[ /********text above background image *******************/
Center(
child:Text('Beneficiary Details',style: TextStyle(fontSize: 14,color: Colors.black),)
),
Center(
child:Text('Sushita sen',style: TextStyle(fontSize: 12,color: Colors.grey),)
),
Center(
child:Text('Reference Number',style: TextStyle(fontSize: 14,color: Colors.black),)
),
Center(
child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
),
Center(
child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
,),
Center(
child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
,),
Center(
child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
,),
Center(
child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
,),
Center(
child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
,),
Center(
child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
,),
],
)
],
)
,)
],
)
],
)
]
),
),
),
],
),
);
}
}

#kriti sharma for background image inside the Stack widget kindly use Positoned widget on top of the Stack widget.
example:-
children: <Widget>[
Positioned(
top: 0,
right: 0,
child: Image.asset(
"assets/icons/categories/map.jpg",
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
),
),
// _buildGoogleMap(context),
// _zoomminusfunction(),
// _zoomplusfunction(),
// _buildContainer(),
],
),

Actually it not black screen you got error like,
Exception caught by rendering library
The following
assertion was thrown during performResize():
Vertical viewport was given unbounded height.
I just added scrollDirection and shrinkWrap in you list.
ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
Your whole code
home: ListView(children: <Widget>[
new Stack(
children: <Widget>[
Container(child: Text("Hello")),
Stack(
children: <Widget>[
Container(
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.blue,
image: DecorationImage(
image: new NetworkImage(
"https://thumbs.dreamstime.com/b/funny-face-baby-27701492.jpg"),
fit: BoxFit.fill)),
),
/*************this is the main background image****************/
Padding(
padding: EdgeInsets.only(top: 100),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
padding: const EdgeInsets.all(8),
children: <Widget>[
Center(
child: Text(
'Beneficiary Details',
style:
TextStyle(fontSize: 14, color: Colors.black),
)),
Center(
child: Text(
'Sushita sen',
style:
TextStyle(fontSize: 12, color: Colors.grey),
)),
Center(
child: Text(
'Reference Number',
style:
TextStyle(fontSize: 14, color: Colors.black),
)),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
)),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
],
)
],
),
)
],
)
],
)
]),
);

I correct it by placing ListView inside container
home: ListView(children: <Widget>[
new Stack(
children: <Widget>[
Container(child: Text("Hello")),
Stack(
children: <Widget>[
Container(
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.blue,
image: DecorationImage(
image: new NetworkImage(
"https://thumbs.dreamstime.com/b/funny-face-baby-27701492.jpg"),
fit: BoxFit.fill)),
),
/*************this is the main background image****************/
Padding(
padding: EdgeInsets.only(top: 100),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Conatiner( /************This container will wrap the listview and will make it scrollable also *******/
height:200,
child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
padding: const EdgeInsets.all(8),
children: <Widget>[
Center(
child: Text(
'Beneficiary Details',
style:
TextStyle(fontSize: 14, color: Colors.black),
)),
Center(
child: Text(
'Sushita sen',
style:
TextStyle(fontSize: 12, color: Colors.grey),
)),
Center(
child: Text(
'Reference Number',
style:
TextStyle(fontSize: 14, color: Colors.black),
)),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
)),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
],
)
)
],
),
)
],
)
],
)
]),
);

Vertically align text in Card widget in Flutter

For some reason the text in the Cards are displaying slightly lower than the vertical center of each Card. It becomes more noticeable as more cards are added.
I have tried wrapping the Text widget in a Center widget. I have tried placing mainAxisAlignment and crossAxisAlignment in what I felt was appropriate placing, but still no difference.
Worth noting: I am using AutoSizeText widget where normal Text widget would be. But even with the normal Text widget, I encounter the same issue.
return new Container(
padding: new EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
Expanded(
flex: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text(
'Happy with this text',
style: new TextStyle(fontSize: 20.0),
),
new Text(
'Happy with this text',
style: new TextStyle(fontSize: 20.0),
),
],
),
),
Expanded(
flex: 8,
child: Row(
// mainAxisAlignment: MainAxisAlignment.center, // does not make any noticeable difference
// crossAxisAlignment: CrossAxisAlignment.center, // does not make any noticeable difference
children: <Widget>[
Expanded(
child: Card(
color: Colors.white70,
child: Container(
child: ListTile(
title: Center(
child: AutoSizeText(
'Not happy with this text',
style: TextStyle(
fontWeight: FontWeight.w500, fontSize: 30),
minFontSize: 12.0,
),
),
leading: Icon(
Icons.question_answer,
color: Colors.blue[500],
),
),
),
)),
Expanded(
child: Column(
children: <Widget>[
Expanded(
child: InkWell(
onTap: () {
print("Card 1 Clicked");
},
child: Card(
color: Colors.white70,
child: Container(
child: ListTile(
title: Center(
child: AutoSizeText(
'Not happy with this text',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 12),
minFontSize: 12.0,
),
)),
),
))),
Expanded(
child: InkWell(
onTap: () {
print("Card 2 Clicked");
},
child: Card(
color: Colors.white70,
child: Container(
child: ListTile(
title: Center(
child: AutoSizeText(
'Not happy with this text',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: fontSize),
minFontSize: 12.0,
),
)),
),
))),
Expanded(
child: InkWell(
onTap: () {
print("Card 3 Clicked");
},
child: Card(
color: Colors.white70,
child: Container(
child: ListTile(
title: Center(
child: AutoSizeText(
'A nocturnal ',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: fontSize),
minFontSize: 12.0,
),
)),
),
))),
Expanded(
child: InkWell(
onTap: () {
print("Card 4 Clicked");
},
child: Card(
color: Colors.white70,
child: Container(
child: ListTile(
title: Center(
child: AutoSizeText(
'A nocturnal ',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: fontSize),
minFontSize: 12.0,
),
)),
),
))),
],
),
),
],
),
),
],
),
);

Container(
child: Card(
margin: EdgeInsets.all(20.0),
elevation: 10.0,
//color: Colors.blue,
child:Align(
child: ListTile(
title: Text(
"CIL",
style: TextStyle(fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
alignment: Alignment.center,
),
),
),

Removing ListTile fixed the issue, though I assume a better way would be to override whatever defaults ListTile has which causes this.