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:
Related
I am learning flutter right now and my SinglePageScrollView is not working, Please help me out, I am trying to solve it since 10 hours, I am just brewww right now.
This is my code btw
SingleChildScrollView(
child: Container(
child: Column(
children: [
Column(
children: [
Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
child: Image.asset("assets/images/img.jpg"),
),
Container(
margin: const EdgeInsets.only(top: 5),
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
child: const Text(
"Hii, This is what i probably uploaded",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
Divider(color: Colors.black)
],
)
],
),
Column(
children: [
Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
child: Image.asset("assets/images/img.jpg"),
),
Container(
margin: const EdgeInsets.only(top: 5),
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
child: const Text(
"Hii, This is what i probably uploaded",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
Divider(color: Colors.black)
],
)
],
),
],
),
),
)
Btw, SingleChildScrollView is the child of Row widget
Your code is working perfectly, it has only one small mistake,
SingleChildScrollview always need some height means in how much area we want scroll our child widgets.
You’ve 2 widgets in your Column
Row
SingleChildScrollview
You want to scroll your child widgets in Column except Row area, so wrap it within Expanded
Expanded(
child: SingleChildScrollView(
….
Row must have children or you have an unclosed parenthesis in the container.
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
Row(
children: [
SingleChildScrollView(
child: Container(),
)
],
)
],
),
);
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
Row(),
SingleChildScrollView(
child: Container(),
),
],
),
);
I'm trying to align 3 widgets inside a Row() evenly.
Just it is not working out as I need it to.
I really do not know how to fix this as I have been at it for hours.
I'm sure thet I'm missing something here.
I'm adding my code and a screenshot of current result.
Updated code!
The issue now seems to couse an out of bounds
New Screenshot
Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
width: rowWidth * 0.2,
alignment: Alignment.centerLeft,
child: CircleAvatar(
backgroundColor: randomColor,
child: Text('JD'),
),
),
Container(
width: rowWidth * 0.2,
alignment: Alignment.centerLeft,
child: Text(
'John Doe',
style:
Theme.of(context).textTheme.subtitle1,
),
),
Container(
width: rowWidth * 0.6,
alignment: Alignment.centerRight,
child: Text(
'Online',
style: Theme.of(context)
.textTheme
.headline6
.copyWith(
color:Theme.of(context).primaryColor,
),
),
),
],
),
],
),
],
),
),
There are a few ways to do it. I modified your Code a bit so you can see it. Your Approach so far was completely fine, you just had to set a width for your Container. Otherwise Flutter doesn't know how to space the elements in the row. Alternatively you could just calculate the width of your Row, and get the width for the Children from that.
I would also recommend putting your Widgets in the Row into Containers for easier handling (like I did below). Hope it helps! Good luck.
Widget _buildTester() {
final fullWidth = MediaQuery.of(context).size.width;
final rowWidth = fullWidth * 0.9; //90%
final containerWidth =
rowWidth / 3; //Could also use this to set the containers individually
return Container(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
width: rowWidth,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
color: Colors.grey,
child: CircleAvatar(
backgroundColor: Colors.red,
child: Text('JD'),
),
),
Container(
color: Colors.green,
child: Text(
'John Doe',
style: Theme.of(context).textTheme.subtitle1,
),
),
Container(
color: Colors.yellow,
child: Text(
'Online',
style: Theme.of(context).textTheme.headline6.copyWith(
color: Theme.of(context).primaryColor,
),
),
),
],
),
],
),
),
],
),
),
);
}
EDIT:
If you want to position your different Elements more freely, I would give the Containers with your Text/Icon in them a fixed width (Calculated from your Row width) and then you can use the Containers 'alignment' property.
In this example I give the green and grey Containers each 20% of the Row and make their content align to the left, and the yellow Container 60% and align it's content to the right.
Widget _buildTester() {
final fullWidth = MediaQuery.of(context).size.width;
final rowWidth = fullWidth * 0.9; //90%
final containerWidth =
rowWidth / 3; //Could also use this to set the containers individually
return Container(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
width: rowWidth,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
width: rowWidth * 0.2,
alignment: Alignment.centerLeft,
color: Colors.grey,
child: CircleAvatar(
backgroundColor: Colors.red,
child: Text('JD'),
),
),
Container(
width: rowWidth * 0.2,
alignment: Alignment.centerLeft,
color: Colors.green,
child: Text(
'John Doe',
style: Theme.of(context).textTheme.subtitle1,
),
),
Container(
width: rowWidth * 0.6,
alignment: Alignment.centerRight,
color: Colors.yellow,
child: Text(
'Online',
style: Theme.of(context).textTheme.headline6.copyWith(
color: Theme.of(context).primaryColor,
),
),
),
],
),
],
),
),
],
),
),
);
}
Simple, do like this.
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RaisedButton(
onPressed: () {},
color: Colors.blue,
child: Text('One'),
),
RaisedButton(
onPressed: () {},
child: Text('Two'),
),
RaisedButton(
onPressed: () {},
child: Text('Three'),
)
],
),
I have an issue in ROW that one child has many items so it is large and another child has fewer items so its height is small so the less item is showing in the center of the ROW, so I need it to align to the top inside the ROW, you can have a look at the image.
Please have a look at my code as well.
rowList = Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: mainBodyList,
);
MAIN BODY LIST
Container(
width: screenWidth * 0.49,
child: Card(
color: Colors.white,
child: Column(
children: <Widget>[
Container(
//width: 200,
padding: EdgeInsets.symmetric(vertical: 8, horizontal: 8),
decoration: BoxDecoration(
color: Colors.black12,
),
child: Row(
children: <Widget>[
ClipOval(
child: Material(
color: Colors.white,
child: SizedBox(
width: 40,
height: 40,
child:
/*Image.asset(
'assets/icons/doc_icon.png'),*/
Icon(
Icons.playlist_add_check,
color: AppTheme.primaryColor,
),
),
),
),
Flexible(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
_localization.localeString(name),
style: TextStyle(color: AppTheme.primaryColor),
),
],
),
),
),
],
),
),
Container(
child: Column(
children: _dynamicListWidget(list),
),
),
],
),
),
);
You need to set crossAxisAlignment as CrossAxisAlignment.start
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: mainBodyList,
);
I am having problem displaying results using ListView.Builder widget. When i placed it on the main.dart page no matter what i do, the page constantly coming up with render errors. Immediately i put it in a separate page, it displayed correctly without error. The page(main.dart) display perfectly without any error without the listView.builder.
My question is it possible or otherwise to display ListView.Builder alongside other widgets on the same page or must it be displayed on a separate page?
Any help will be appreciated.
body: TabBarView(
children: <Widget>[
SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
// child: SingleChildScrollView(
// scrollDirection: Axis.vertical,
child:Container(
child: Column(
//crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child:Expanded(
child: Image.asset("assets/images/1frenchToast.webp"),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text("Select Cuisine",style: TextStyle(color: Colors.black),),
GestureDetector(
child: DropdownButton(
//isDense: true,
style: TextStyle(fontSize: 14,color: Colors.black,),
value: dropDownSelectedItemState,
items: items,
onChanged: (String selectValue){
ClassHub().mySharedPreference("cuisineChoice", "set", selectValue);
ClassHub().getFoodCategory(selectValue).then((onValue){
if(onValue !=null){
setState(() {
foodCategory = onValue;
});
}
});
setState(() {
dropDownSelectedItemState = selectValue;
});
},
),
onLongPress: (){
},
),
],
),
// This is the portion causing issues
Column(
//mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
//myListView(),
Container(
child: ListView.builder(scrollDirection: Axis.vertical,
itemCount: foodCategory.length
itemBuilder: (context,index){
return ListTile(
title: Text(foodCategory[index].foodType),
);
},
),
),
]
),
Container(
//height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 20,),
height: 60,
width: MediaQuery.of(context).size.width-20,
child: ListTile(
leading: CircleAvatar(
minRadius: 10,
maxRadius: 30,
//child:Image.asset("assets/images/Capture.JPG",height: 60,width: 60,),
//borderRadius: BorderRadius.circular(30),
backgroundImage: ExactAssetImage('assets/images/Capture.JPG'),
),
title: Text("Western Food Recipes"),
),
),
],
),
Container(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
height: 60,
width: MediaQuery.of(context).size.width-20,
child:ListTile(
leading: Image.asset("assets/images/Capture.JPG"),
// borderRadius: BorderRadius.circular(30),
// ),
title: Text("African Food Recipes"),
),
),
],
),
Container(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
height: 60,
width: MediaQuery.of(context).size.width-20,
child:ListTile(
leading: Image.asset("assets/images/Capture.JPG"),
// borderRadius: BorderRadius.circular(30),
// ),
title: Text("African Food Recipes"),
),
),
],
),
],
),
),
// ),
),
],
),
),
I want to be able to display ListView.Builder widget on the same page with other widgets without any render error. Is this possible or not?
What you need is shrinkWrap = true inside ListView.builder.
Else the children will wont know how much space to take in the scrollable widget.
you must have to pass the builder_context and use this is ListView.Builder function it might help you
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")
],
),
),
),
),
),
]
),
)