Develop Reference

How to make Row take full height of its children in Flutter?

I'm trying to create a UI for the contact list. But the row is taking the full height of its parent which is not what I want.
Here's my code
Container(
padding: EdgeInsets.all(5),
child: Material(
color: Colors.black,
elevation: 5,
borderRadius: BorderRadius.circular(20),
child: Container(
padding: EdgeInsets.all(10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
CircleAvatar(
backgroundImage: AssetImage("assets/images/1700.jpg"),
radius: 25,
),
SizedBox(width: 10,),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Test", style: TextStyle(color: Colors.white,fontSize: 17, fontWeight: FontWeight.bold),maxLines: 1,),
SizedBox(height: 5,),
Text("Testing the test. ", style: TextStyle(color: Colors.white,fontSize: 15),maxLines: 1,)
],
),
],
),
),
),
);
I tried giving MainAxisSize min or max values but the results were unchanged. Is there any flutter alternative for wrap_content or match_parent (similar to native android development)
Need Help ;_;

i don't get what you really want but what i got is,
you can wrap it in a column , which is easy way to do that
child: Column (
children:[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
CircleAvatar(
backgroundImage: AssetImage("assets/images/1700.jpg"),
radius: 25,
),
SizedBox(width: 10,),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Test", style: TextStyle(color: Colors.white,fontSize: 17, fontWeight: FontWeight.bold),maxLines: 1,),
SizedBox(height: 5,),
Text("Testing the test. ", style: TextStyle(color: Colors.white,fontSize: 15),maxLines: 1,)
],
),
],
),
]
)
please tell me the result

text widget keeps centering without centre widget

image link since i'm not allowed to post images yet
I'm trying to create an app but the two texts 'hello and mr '' are in the center even when I've not added the center widget and why do they have that amount of space between them. the app title had a massive bottom padding that i had to remove it.' the app sample is in the image above.
I just want the two to stack above each other in the top left corner, and the space between them to reduce, Here's my code:
Container(
child: SingleChildScrollView(
padding: EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
Text(
'Hello,',
style: Theme.of(context)
.textTheme.headline4
.apply( color: Colors.grey),
),
Text(
"Mr. Udeinya",
style: Theme.of(context)
.textTheme
.headline4
.apply(color: Colors.deepOrange, fontWeightDelta: 2),
),
Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.deepOrange,
border: Border.all(
width: 3,
color: Colors.white,
)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Wallet Balance :',
style: TextStyle(
fontSize: 19,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
SizedBox(
height: 10.0,
),
Container(
width: double.infinity,
)
],
),
),
],
),
),
),
and the image
image link since i'm not allowed to post images yet

One solution to your problem would be to change the crossAxisAlignment property of your column to CrossAxisAlignment.start
I would also recommend, if you intend to group them together, to put your two text widgets together in a column themselves.
Container(
child: SingleChildScrollView(
padding: EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Hello,',
style: Theme.of(context)
.textTheme
.headline4
.apply(color: Colors.grey),
),
Text(
"Mr. Udeinya",
style: Theme.of(context)
.textTheme
.headline4
.apply(color: Colors.deepOrange, fontWeightDelta: 2),
),
],
),
Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.deepOrange,
border: Border.all(
width: 3,
color: Colors.white,
)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Wallet Balance :',
style: TextStyle(
fontSize: 19,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
SizedBox(
height: 10.0,
),
Container(
width: double.infinity,
)
],
),
),
],
),
),
)
Something like This ? Hope that it helped.

Try to use text align property of Text widget you can find more in the link. Text widget documentation
Example:
Text("data,",textAlign: TextAlign.left,)

The problem is you are not giving a crossAxisAlignment to the top-most column, so by default, it is centred.Add this to the top-most Column
crossAxisAlignment: CrossAxisAlignment.start,

TextOverflow in Row which is inside a Column in Flutter

I'm trying to develop a Card with some text widget beneath it. Look at the image below.
The problem I'm facing is when the text next to location icon is large, it overflows. I've tried with Flex, but it throws an exception. There's also a star icon at the right bottom of the card.
Here's what I want :
I want the text to be single line ending with .. if it's too long.
star should be placed at the bottom right
The location icon doesn't consider the left padding I gave (Padding widget)
Please help! Thanks in advance.
Here's my code :
Scaffold buildOffersList(OfferModel offerModel) {
return Scaffold(
body: Stack(
children: <Widget>[
Center(
child: Image.network(
'https://b.zmtcdn.com/data/pictures/2/19250332/0fe23bee17b60d181fd43421ca3480d4_featured_v2.jpg',
fit: BoxFit.cover,
width: size.width,
height: size.height,
color: Colors.black.withOpacity(.6),
colorBlendMode: BlendMode.darken
),
),
Column(
children: <Widget>[
Container(
child: PageHeader(pageTitle: 'Popular Offers', numberOfOffers: '20 venues', sortByText: 'Sort By: Location', filterText: 'Filter'),
),
Expanded(
child: GridView.count(
crossAxisCount: 2,
mainAxisSpacing: 5.0,
crossAxisSpacing: 5.0,
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
children: List.generate(offerModel.payload.offers.length, (index) {
return Center(
child: offerCard3(offerModel.payload.offers[index]),
);
}),
),
),
],
),
],
)
);
}
Widget offerCard3(Offer offer) {
return GestureDetector(
child: Card(
elevation: 1.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0.0),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
AspectRatio(
aspectRatio: 18.0 / 8.0,
child: Image.network(
"https://b.zmtcdn.com/data/pictures/2/19250332/0fe23bee17b60d181fd43421ca3480d4_featured_v2.jpg",
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(7.0, 5.0, 4.0, 5.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
getBrandName(offer),
getOfferTitle(offer),
SizedBox(height: 15.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
getLocationIcon(),
getOfferContactAddressView(offer),
],
),
getKmText(),
],
),
//Spacer(),
getStarIcon(),
],
),
],
),
),
],
),
),
);
}
Text getOfferContactAddressView(Offer offer) {
return Text(
offer.offerContactAddress,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black38,
fontSize: 9.0,
),
);
}
Icon getStarIcon() {
return Icon(
Icons.star,
color: Colors.orange,
size: 25,
);
}

There is a flutter package for auto resize text to contain the full text.
auto_size_text 2.1.0 here

FIrst Solution Highly Recommend
First of all, you can use Listtile.
ListTile(title: Text("ListTile"),
subtitle: Text("Sample Subtitle. \nSubtitle line 3"),
trailing: Icon(Icons.home),
leading: Icon(Icons.add_box),
isThreeLine: true,
)
Second Solution
SizedBox(
width: 500,
child: new Text(
'Text largeeeeeeeeeeeeeeeeeeeeeee',
//Overflow: TextOverflow.ellipsis will make you large text end with ....
overflow: TextOverflow.ellipsis,
style: new TextStyle(
fontSize: 13.0,
),
),
),

I think you have to use like below code:-
Expanded(
child: Wrap(
direction: Axis.horizontal,
runAlignment: WrapAlignment.start,
children: <Widget>[
getOfferContactAddressView(offer),
],
),
flex: 1,
),

It happens because the Text Widget doesn't know how big the width of the Row.
Please try this code out DartPad to help you find where you went wrong with your code. I still believe, wrapping the Text Widget with Expanded and give overflow property will give what you want right away.
Here's the SS of it:

Flutter | How to make custom button of BottomNavigationBar in flutter?

I want make a button with text and icon inside it, with custom background color and custom width. with fix position (not scrollable). would you like to help me please ?
here are the code:
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.shifting,
currentIndex: 0, // this will be set when a new tab is tapped
items: [
BottomNavigationBarItem(icon: Icon(Icons.supervised_user_circle), title: Text('Players'),backgroundColor: Colors.red),
BottomNavigationBarItem(icon: Icon(Icons.whatshot), title: Text('Trending'),backgroundColor: Colors.blueAccent),
BottomNavigationBarItem(icon: Icon(Icons.access_time), title: Text('Highlights'),backgroundColor: Colors.yellow)
]
its only give a color for the icon.
this is what I want:

Here you go
Widget build(context) {
return Scaffold(
bottomNavigationBar: Container(
height: 56,
margin: EdgeInsets.symmetric(vertical: 24, horizontal: 12),
child: Row(
children: <Widget>[
Container(
width: 66,
color: Colors.green,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Icon(Icons.chat, color: Colors.white), Text("CHAT", style: TextStyle(color: Colors.white))],
),
),
Container(
width: 66,
color: Colors.green,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Icon(Icons.notifications_active, color: Colors.white), Text("NOTIF", style: TextStyle(color: Colors.white))],
),
),
Expanded(
child: Container(
alignment: Alignment.center,
color: Colors.red,
child: Text("BUY NOW", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
),
),
],
),
),
);
}

You may want to look at the concept of a BottomAppBar instead.
This bar accepts any widget as children not just BottomNavigationBarItems.
You could try this:
BottomAppBar(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: SizedBox(
height: 44,
child: Material(
type: MaterialType.transparency,
child: InkWell(
onTap: () {},
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.add, color: Colors.blue, size: 24),
Text("Add")
],
),
),
),
),
),
]
),
)

How to add a Vertical Divider between Widget on Column in Flutter?

Good day.
I've surfed on this website about how to add a Vertical Divider between Widget on Column in Flutter? but I got nothing.
here what I want
I already make the horizontal divider. but when I try to make a vertical divider that separating between 2 objects (text | image), I got nothing.
here are the code:
Row(children: <Widget>[
Expanded(
child: new Container(
margin: const EdgeInsets.only(left: 10.0, right: 20.0),
child: Divider(
color: Colors.black,
height: 36,
)),
),
Text("OR"),
Expanded(
child: new Container(
margin: const EdgeInsets.only(left: 20.0, right: 10.0),
child: Divider(
color: Colors.black,
height: 36,
)),
),
]),
code above is for horizontal
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Row(
children: <Widget>[
Image.asset('images/makanan.png', width: 30,),
Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
],
),
VerticalDivider(
color: Colors.red,
width: 20,
),
Row(
children: <Widget>[
Image.asset('images/makanan.png', width: 30,),
Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
],
),
],
),
code above I make for Vertical Divider. but failed.
Need your help,
Thank you.

Try to replace
VerticalDivider(color: Colors.red, width: 20)
with
Container(height: 80, child: VerticalDivider(color: Colors.red))

Try this:
IntrinsicHeight(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('Foo'),
VerticalDivider(),
Text('Bar'),
VerticalDivider(),
Text('Baz'),
],
))

you can either use
VerticalDivider(
thickness: 1,
color:Colors.black
),
or
Container(
height: 30,
width: 1,
color: Colors.black
)

oke here the answer.
it works for me.
Thank you mr #Android Team and mr #sunxs for your help :)
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Row(
children: <Widget>[
Image.asset('images/makanan.png', width: 30,),
Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
],
),
Container(height: 80, child: VerticalDivider(color: Colors.red)),
Row(
children: <Widget>[
Image.asset('images/makanan.png', width: 30,),
Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
],
),
Container(height: 80, child: VerticalDivider(color: Colors.red)),
Row(
children: <Widget>[
Image.asset('images/makanan.png', width: 30,),
Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
],
),
],
),

you can try:
Container(
color: Colors.grey,
height: 30,
width: 1,
),
It worked for me! :))

The most optimal way is to put the Vertical Divider inside a SizedBox.
SizedBox(
height: 80,
child: VerticalDivider(color: primaryColor),
)