Does anyone know how to fix this? TextOverflow.ellipsis does not help to put ellipsis - flutter

I need that if the user had a long nickname, then an ellipsis would appear, but it does not work.
Here is the code:
AppBar(
elevation: 0,
toolbarHeight: 76,
backgroundColor: Colors.transparent,
title: Row(
children: [
widget.isActiveBackButton
? IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: Icon(
Icons.arrow_back_rounded,
color: Colors.black87.withOpacity(0.7),
size: 30,
))
: Container(),
widget.isActiveBackButton
? const SizedBox(
width: 20,
)
: Container(),
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: Row(
children: [
Text(
'WWWWWWWWWWWW',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.roboto(
textStyle: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w700,
color: Colors.black87.withOpacity(0.7),
)),
),
const SizedBox(width: 5.0),
!UserData.isVerifiedAccount
? Icon(
Icons.star_rounded,
color: Colors.yellow.shade700,
size: 30,
)
: Container(),
],
),
),
],
),
actions: [
Row(
children: [
Container(
margin: const EdgeInsets.only(right: 15.0),
child: CircleAvatar(
radius: 25,
child: Material(
borderRadius: BorderRadius.circular(100.0),
clipBehavior: Clip.antiAlias,
color: Colors.redAccent,
child: SizedBox(
width: 100,
height: 50,
child: InkWell(
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) =>
const MyLikesScreen()));
},
child: const Icon(
Icons.favorite_rounded,
size: 25,
),
),
),
shadowColor: Colors.black,
elevation: 5,
),
),
),
],
)
],
),


Follow this structure
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Flexible(
child: Text(
'WWWWWWWWWWWW',
appBar: AppBar(
elevation: 0,
toolbarHeight: 76,
backgroundColor: Colors.transparent,
title: Row(
children: [
IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: Icon(
Icons.arrow_back_rounded,
color: Colors.black87.withOpacity(0.7),
size: 30,
)),
const SizedBox(
width: 20,
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Flexible(
child: Text(
'WWWWWWWWWWWW',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.roboto(
textStyle: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w700,
color: Colors.black87.withOpacity(0.7),
)),
),
),
const SizedBox(width: 5.0),
Icon(
Icons.star_rounded,
color: Colors.yellow.shade700,
size: 30,
),
],
),
),
),
],
),
actions: [
Row(
children: [
Container(
margin: const EdgeInsets.only(right: 15.0),
child: CircleAvatar(
radius: 25,
child: Material(
borderRadius: BorderRadius.circular(100.0),
clipBehavior: Clip.antiAlias,
color: Colors.redAccent,
child: SizedBox(
width: 100,
height: 50,
child: InkWell(
onTap: () {},
child: const Icon(
Icons.favorite_rounded,
size: 25,
),
),
),
shadowColor: Colors.black,
elevation: 5,
),
),
),
],
)
],
),


Wrap the Text Widget with Expanded widget.
Expanded(child: Text(
'WWWWWWWWWWWW',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.roboto(
textStyle: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w700,
color: Colors.black87.withOpacity(0.7),
)),
)),

Related

flutter setState Delay in bottomSheet

i made a code which opens bottomSheet. Inside the bottomSheet there are inputs that can be added and subtracted by pressing a button.
but the changes that occur are not in accordance with what I expected. changes are delayed not directly.
Widget buildBottomSheet(BuildContext context) => makeDismissible(
child: DraggableScrollableSheet(
initialChildSize: 0.6,
minChildSize: 0.5,
maxChildSize: 0.6,
builder: (_, controller) => Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
padding: const EdgeInsets.only(top: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Center(child: Icon(Icons.horizontal_rule)),
ListTile(
title: Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
ClipRRect(
borderRadius:
const BorderRadius.all(Radius.circular(20)),
child: Image.network(
widget.productList.image,
width: 125,
height: 125,
fit: BoxFit.cover,
),
),
SizedBox(
height: 125,
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 15),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (widget.productList.discount == 0)
Text(
CurrencyFormat.convertToIdr(
widget.productList.price, 0),
style: const TextStyle(
fontWeight: FontWeight.w600,
fontSize: 18),
),
if (widget.productList.discount >= 1)
Text(
CurrencyFormat.convertToIdr(
widget.productList.price -
(widget.productList.discount /
100) *
widget.productList.price,
0),
style: const TextStyle(
fontWeight: FontWeight.w600,
fontSize: 18),
),
if (widget.productList.discount >= 1)
Row(
children: [
Text(
"${widget.productList.discount}% ",
style: const TextStyle(
color: Colors.red,
fontWeight: FontWeight.w600),
),
Text(
CurrencyFormat.convertToIdr(
widget.productList.price, 0),
style: const TextStyle(
color: Colors.black38,
fontWeight: FontWeight.w600,
decoration:
TextDecoration.lineThrough),
)
],
),
Text("Stock : ${widget.productList.stock}")
],
),
),
),
],
),
],
),
),
// minLeadingWidth: 125,
trailing: SizedBox(
child: IconButton(
onPressed: () => Navigator.pop(context),
icon: const Icon(Icons.close)),
),
),
const SizedBox(
height: 10,
),
const Divider(
indent: 15,
endIndent: 15,
color: Colors.black,
),
const SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Column(
children: const [
Text(
"Pilihan Varian :",
style: TextStyle(fontWeight: FontWeight.w800),
),
],
),
),
const Spacer(),
SizedBox(
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 15, horizontal: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ElevatedButton(
onPressed: _minCounter,
clipBehavior: Clip.antiAlias,
style: ElevatedButton.styleFrom(
shadowColor: Colors.white,
primary: Colors.black,
padding: const EdgeInsets.symmetric(
horizontal: 0, vertical: 0),
),
child: const Icon(Icons.remove),
),
Text('${widget.productList.minbuy + counter} '),
// const SizedBox(
// width: 50,
// height: 35,
// child: TextField(
// textAlign: TextAlign.center,
// decoration: InputDecoration(
// border: OutlineInputBorder(
// borderSide:
// BorderSide(color: Colors.black)),
// ),
// ),
// ),
ElevatedButton(
onPressed: _incrementCounter,
clipBehavior: Clip.antiAlias,
style: ElevatedButton.styleFrom(
shadowColor: Colors.white,
primary: Colors.black,
padding: const EdgeInsets.symmetric(
horizontal: 0, vertical: 0),
),
child: const Icon(Icons.add),
),
],
),
ElevatedButton.icon(
icon: const Icon(
Icons.add,
color: Colors.amber,
size: 14,
),
label: const Text(
"Keranjang",
style: TextStyle(color: Colors.amber),
),
clipBehavior: Clip.antiAlias,
onPressed: () {},
style: ElevatedButton.styleFrom(
side: const BorderSide(color: Colors.amber),
shadowColor: Colors.white,
primary: Colors.white,
padding: const EdgeInsets.symmetric(
horizontal: 15, vertical: 10),
),
),
],
),
),
),
],
),
),
),
);
for full code : https://github.com/nazhoir/travel-app/blob/main/lib/views/shop/product_detail.dart

Navigate back from page flutter

I want to navigate to the previous page using the arrow icon I have added in this code. to where I want to add that code and tell me how to code that part. want to navigate from detail_screen.dart to home_page.dart using the arrow icon I have added. can someone please provide a proper answer for this?
detail_screen.dart
import 'package:flutter/material.dart';
class DetailsScreen extends StatelessWidget {
const DetailsScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
//shadowColor: Colors.transparent,
leading: Icon(
Icons.arrow_back_rounded,
color: Colors.black,
),
actions: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: const [
CircleAvatar(
radius: 40,
backgroundColor: Colors.white,
child:
Icon(Icons.favorite_border_outlined, color: Colors.black),
),
CircleAvatar(
radius: 40,
backgroundColor: Colors.white,
child: Icon(Icons.shopping_bag_outlined, color: Colors.black),
)
],
),
),
],
),
body: Column(
children: <Widget>[
Stack(
alignment: Alignment.bottomRight,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 0),
child: Container(
height: MediaQuery.of(context).size.height * 0.9,
width: MediaQuery.of(context).size.width * 0.9,
padding: const EdgeInsets.only(left: 20),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/image23.png"),
fit: BoxFit.contain,
),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 20,
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.grey.shade100,
),
alignment: const Alignment(1, 1),
height: 310,
width: 375,
child: Column(
children: [
SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(left: 10),
child: Text(
"Crop Top",
style: TextStyle(
fontSize: 24,
color: Color(0xff262626),
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: 25,
height: 25,
child: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.blueAccent,
child: null),
),
),
SizedBox(
width: 25,
height: 25,
child: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.amber,
child: null),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: SizedBox(
width: 25,
height: 25,
child: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.lightGreen,
child: null),
),
),
]),
],
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 270, 10),
child: Text(
"Sizes",
style: TextStyle(
fontSize: 16,
color: Color(0xff262626),
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
// SizedBox(
// height: 30,
// ),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('XS');
},
child: Text('XS'),
),
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('X');
},
child: Text('S'),
),
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('M');
},
child: Text('M'),
),
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('L');
},
child: Text('L'),
),
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('XL');
},
child: Text('XL'),
),
],
),
SizedBox(
height: 30,
),
Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"30% off",
style: TextStyle(
fontSize: 25,
color: Colors.purple,
fontWeight: FontWeight.w700),
),
),
],
),
SizedBox(
height: 30,
),
Row(
children: const [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Rs.2950",
style: TextStyle(
fontSize: 18,
color: Color(0xff8399A9),
fontWeight: FontWeight.w700,
decoration: TextDecoration.lineThrough),
),
),
Text(
"Rs.2750",
style: TextStyle(
fontSize: 24,
color: Color(0xff0DA75F),
fontWeight: FontWeight.w700,
),
),
],
),
],
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(230, 110, 0, 0),
child: ElevatedButton(
onPressed: () {},
child: const Text(
"Add to Cart ",
),
style: ElevatedButton.styleFrom(
primary: Colors.pinkAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
bottomRight: Radius.circular(20),
),
),
padding: const EdgeInsets.all(28),
),
),
),
],
),
],
),
);
}
}
home_page.dart
import 'package:flutter/material.dart';
import 'package:fashion_app/details_screen.dart';
import 'package:flutter/services.dart';
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
//final double _borderRadious = 24;
#override
#override
void initState() {
// TODO: implement initState
super.initState();
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.pinkAccent,
),
body: ListView(
padding: const EdgeInsets.only(top: 40, left: 20, right: 20),
children: [
HelloText(),
Name(),
SizedBox(
height: 10,
),
buildSearchInput(),
SizedBox(
height: 10,
),
Stack(children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 45, 10, 0),
child: TextButton(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.red.shade50,
),
height: 137,
width: 327,
child: Column(
children: const [
Padding(
padding: const EdgeInsets.fromLTRB(20, 40, 100, 40),
child: Text(
"Summer Collections",
style: TextStyle(
fontSize: 24,
color: Color(0xff262626),
fontWeight: FontWeight.w700),
textAlign: TextAlign.justify,
),
),
],
)),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const DetailsScreen()));
},
),
),
const Padding(
padding: EdgeInsets.fromLTRB(200, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/dressone.png"),
),
),
]),
Stack(children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 45, 10, 0),
child: TextButton(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.red.shade50,
),
height: 137,
width: 327,
child: Column(
children: const [
Padding(
padding: const EdgeInsets.fromLTRB(20, 40, 100, 40),
child: Text(
"Winter Collections",
style: TextStyle(
fontSize: 24,
color: Color(0xff262626),
fontWeight: FontWeight.w700),
textAlign: TextAlign.justify,
),
),
],
)),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const DetailsScreen()));
},
),
),
const Padding(
padding: EdgeInsets.fromLTRB(200, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/dresstwo.png"),
),
),
]),
Stack(children: [
Padding(
padding: const EdgeInsets.fromLTRB(5, 20, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.blue.shade50,
),
height: 137,
width: 327,
child: Row(
children: const [
Padding(
padding: EdgeInsets.fromLTRB(150, 40, 0, 40),
child: Text(
"Get",
style: TextStyle(
fontSize: 24,
color: Colors.black,
fontWeight: FontWeight.w700),
),
),
Padding(
padding: EdgeInsets.all(5.0),
child: Text(
"30%",
style: TextStyle(
fontSize: 24,
color: Colors.purple,
fontWeight: FontWeight.w700),
),
),
Text(
"Off",
style: TextStyle(
fontSize: 24,
color: Colors.black,
fontWeight: FontWeight.w700),
),
],
)),
),
const Padding(
padding: EdgeInsets.fromLTRB(15, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/dressthree.png"),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(230, 110, 0, 40),
child: ElevatedButton(
onPressed: () {},
child: const Text(
"Know More",
),
style: ElevatedButton.styleFrom(
primary: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
bottomRight: Radius.circular(20))),
padding: const EdgeInsets.all(15)),
),
),
]),
],
),
);
}
Widget HelloText() => Container(
child: Row(children: [
Text(
'Hello,',
style: TextStyle(
fontSize: 28,
color: Colors.black,
fontWeight: FontWeight.w500,
),
),
]),
);
Widget Name() => Container(
child: Row(children: [
Text(
'Nirasha',
style: TextStyle(
fontSize: 28,
color: Colors.amber,
fontWeight: FontWeight.w500,
),
),
]),
);
Widget buildSearchInput() => Container(
decoration: BoxDecoration(
color: Colors.grey[300], borderRadius: BorderRadius.circular(20)),
child: Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20),
child: Row(
children: [
Icon(
Icons.search,
size: 30,
color: Colors.grey,
),
Flexible(
child: TextField(
decoration: InputDecoration(border: InputBorder.none),
),
),
],
),
),
);
}

use following Structure in detail_screen.dart scaffold:
body : SafeArea(
child: Column(
children: <Widget>[
Container(child: IconButton(
icon: Icon(
Icons.chevron_left_sharp, //backIcon
color: Colors.indigo,
size: 30,
),
onPressed: () {
Navigator.pop(context);
},
),
-------------------- //other Elements Of body
]
),
)

Please use this : Navigator.of(context).pop();

In your detail_screen.dart, use this code in Appbar leading.
IconButton(
icon: new Icon(
Icons.arrow_back_rounded,
color: Colors.black,
),
onPressed: () => Navigator.pop(context),
),

Used this code now it is working.
leading: IconButton(
icon: new Icon(
Icons.arrow_back_rounded,
color: Colors.black,
),
onPressed: () {Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HomePage()));
},
),

In your DetailScreen, your leading widget should be IconButton and handle onpressed event of that IconButton to pop the activity from stack.
Here it is:
leading: IconButton(
icon: new Icon(
Icons.arrow_back_rounded,
color: Colors.black,
),
onPressed: () => Navigator.pop(context),
),

How to make responsive content in Container Flutter

How can I make the responsive Content in Container,
when I put anything in a container and the Height content is oversize what is the solution for this? I need to fix it when the user input too much information about the post and I warp it with less/more plugins and when the user uses it the screen is over pixel for sure
I use media query on the container that means I fix the size is okay so it's will happen if too much text
Widget _postWidget() {
return Container(
height: MediaQuery.of(context).size.height * 0.40,
width: MediaQuery.of(context).size.width * 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
flex: 1,
child: Container(
height: 45, //height, //155,
width: 45, //width, //155,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: const Color(0xff7c94b6),
image: DecorationImage(
image: NetworkImage(''),
fit: BoxFit.cover,
),
),
),
),
Expanded(
flex: 6,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
RichText(
text: TextSpan(
text: '[C]post.username ',
style: TextStyle(
color: Colors.black,
fontFamily: 'SukhumvitSetBold',
fontWeight: FontWeight.bold),
children: const <TextSpan>[
TextSpan(
text: '3h',
style: TextStyle(
color: Colors.grey,
fontFamily: 'SukhumvitSetBold',
fontWeight: FontWeight.w400)),
],
),
),
Text(
'[user]Desuka',
style: TextStyle(
color: Colors.grey[500],
fontFamily: 'SukhumvitSetMedium',
),
)
],
),
),
),
Expanded(
flex: 2,
child: SizedBox(
width: 200.0,
height: 30.0,
child: OutlinedButton(
child: Text(
'Join+',
style: TextStyle(
color: HexColor("7225FF"),
),
),
onPressed: () => print("it's pressed"),
style: ElevatedButton.styleFrom(
side: BorderSide(
width: 1.5,
color: HexColor("7225FF"),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
))),
],
),
),
),
InkWell(
child: Container(
margin: const EdgeInsets.only(
top: 10,
bottom: 10,
right: 20,
left: 20,
),
width: double.infinity,
height: 170.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.0),
image: DecorationImage(
image: NetworkImage(
'https://gitlab.com/2Shours/alphapic/raw/master/22.jpeg'),
fit: BoxFit.cover,
),
),
),
),
SizedBox(
height: 5,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Column(
children: [
Text(
'Travis Scott x Nike Fregment',
style: TextStyle(
color: Colors.black,
fontFamily: 'SukhumvitSetBold',
fontSize: 16,
fontWeight: FontWeight.bold),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Column(
children: [
ReadMoreText(
'The Flutter framework builds its layout via the composition of widgets, everything that you construct programmatically is a widget and these are compiled together to create the user interface. ',
style: TextStyle(
color: Colors.black,
fontSize: 15,
fontFamily: 'SukumvitSetMedium'),
trimLines: 2,
colorClickableText: HexColor("7225FF"),
trimMode: TrimMode.Line,
trimCollapsedText: 'More',
trimExpandedText: ' Less',
),
],
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Row(
children: <Widget>[
IconButton(
icon: Icon(
(IconData(
0xe902,
fontFamily: 'heartPost',
)),
color: Colors.purple,
size: 20,
),
iconSize: 30.0,
onPressed: () => print('Like post'),
),
Text(
'2222',
style: TextStyle(
fontSize: 14.0,
fontFamily: 'SukhumvitSetMedium',
fontWeight: FontWeight.w600,
),
),
],
),
SizedBox(width: 10.0),
Row(
children: <Widget>[
IconButton(
icon: Icon(
IconData(0xe901, fontFamily: 'commentPost')),
iconSize: 20.0,
onPressed: () {}),
Text(
'2222',
style: TextStyle(
fontSize: 14.0,
fontFamily: 'SukhumvitSetMedium',
fontWeight: FontWeight.w600,
),
),
],
),
SizedBox(width: 20.0),
Row(
children: <Widget>[
IconButton(
icon: Icon(IconData(0xe906, fontFamily: 'offerPost')),
iconSize: 20.0,
onPressed: () {},
),
Text(
'Offer',
style: TextStyle(
fontSize: 14.0,
fontFamily: 'SukhumvitSetMedium',
fontWeight: FontWeight.w600,
),
),
],
),
],
),
IconButton(
icon: Icon(
(IconData(
0xe908,
fontFamily: 'wishlistPost',
)),
color: Colors.purple,
size: 20,
),
iconSize: 30.0,
onPressed: () => print('Save post'),
),
],
),
),
],
),
);
}

TextButton Icon with Two Line Label/Text, Is it possible?

Trying to make a card menu that is a quick link to app's main sections. I tried using TextButton.Icon ( but since the word count varies too much from 8-letter word to 19-letter word, the font size becomes too small for the shorter word, so the aesthetics looks weird.
I'm thinking to make the label of the button to two lines as shown in the JPEG attached.
Wondering if this is possible with a container inside a material button instead?
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class QuickMenu extends StatelessWidget {
const QuickMenu({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
automaticallyImplyLeading: false, //to remove back button
backgroundColor: Colors.white,
flexibleSpace: Container(
margin: EdgeInsets.fromLTRB(4.0, 25.0, 4.0, 3.0),
height: 55.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image(
image: AssetImage('images/logo.png'),
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.notifications_outlined,
size: 35.0,
color: Color(0xFF959DA8),
),
),
],
),
),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Card(
margin: EdgeInsets.fromLTRB(15.0, 15.0, 15.0, 15.0),
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Padding(
padding:
const EdgeInsets.fromLTRB(10.0, 5.0, 15.0, 3.0),
child: Text(
'MENU BUTTONS',
style: TextStyle(
fontFamily: "Roboto",
fontSize: 20.0,
color: Color(0xFFD4D7DA),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Row(
children: [
TextButton.icon(
onPressed: () {},
icon: Icon(Icons.home,
color: Colors.white, size: 30.0),
label: Text(
'Text Button 1',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 15.0,
color: Colors.white),
),
style: TextButton.styleFrom(
padding:
EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
backgroundColor: Color(0xFFD4D7DA),
),
),
SizedBox(
width: 10.0,
),
TextButton.icon(
onPressed: () {},
icon: Icon(Icons.home,
color: Colors.white, size: 30.0),
label: Text(
'Text Button 2',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 15.0,
color: Colors.white),
),
style: TextButton.styleFrom(
padding:
EdgeInsets.fromLTRB(10.0, 8.0, 75.0, 8.0),
backgroundColor: Color(0xFFD4D7DA),
),
),
],
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(2.0, 2.0, 2.0, 8.0),
child: Expanded(
child: Row(
children: [
TextButton.icon(
onPressed: () {},
icon: Icon(Icons.home,
color: Colors.white, size: 30.0),
label: Text(
'Text Button 3',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 8.0,
color: Colors.white),
),
style: TextButton.styleFrom(
padding:
EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
backgroundColor: Color(0xFFD4D7DA),
),
),
SizedBox(
width: 10.0,
),
TextButton.icon(
onPressed: () {},
icon: Icon(Icons.home,
color: Colors.white, size: 30.0),
label: Text(
'Text Button 4',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 8.0,
color: Colors.white),
),
style: TextButton.styleFrom(
padding:
EdgeInsets.fromLTRB(10.0, 8.0, 75.0, 8.0),
backgroundColor: Color(0xFFD4D7DA),
),
),
],
),
),
),
],
),
],
),
),
],
),
),
);
}
}

Try with this and also if you used a list or column you can make it expanded
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class QuickMenu extends StatelessWidget {
const QuickMenu({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
automaticallyImplyLeading: false, //to remove back button
backgroundColor: Colors.white,
flexibleSpace: Container(
margin: EdgeInsets.fromLTRB(4.0, 25.0, 4.0, 3.0),
height: 55.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image(
image: AssetImage('images/profile.png'),
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.notifications_outlined,
size: 35.0,
color: Color(0xFF959DA8),
),
),
],
),
),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Card(
margin: EdgeInsets.fromLTRB(15.0, 15.0, 15.0, 15.0),
clipBehavior: Clip.antiAlias,
color: Colors.grey,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Padding(
padding:
const EdgeInsets.fromLTRB(10.0, 5.0, 15.0, 3.0),
child: Text(
'MENU BUTTONS',
style: TextStyle(
fontFamily: "Roboto",
fontSize: 20.0,
color: Color(0xFFD4D7DA),
),
),
),
],
),
Row(
children: [
TextButton.icon(
onPressed: () {},
icon: Icon(Icons.home),
label: Container(
width: 100,// change width as you need
height: 70, // change height as you need
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"Text",
textAlign: TextAlign.left,
maxLines: 2, // change max line you need
),
),
),
style: TextButton.styleFrom(
padding:
EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
backgroundColor: Color(0xFFD4D7DA),
),
),
SizedBox(width: 10,),
TextButton.icon(
onPressed: () {},
icon: Icon(Icons.payments_rounded),
label: Container(
width: 100, // change width as you need
height: 70, // change height as you need
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"Text Button 2",
textAlign: TextAlign.left,
maxLines: 2,
style: TextStyle(fontSize: 24),// change max line you need
),
),
),
style: TextButton.styleFrom(
padding:
EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
backgroundColor: Color(0xFFD4D7DA),
),
),
],
),
SizedBox(height: 10,),
Row(
children: [
TextButton.icon(
onPressed: () {},
icon: Icon(Icons.shopping_cart),
label: Container(
width: 100,
height: 70, // change height as you need
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"TextButton 3 ",
textAlign: TextAlign.left,
maxLines: 2, // change max line you need
),
),
),
style: TextButton.styleFrom(
padding:
EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
backgroundColor: Color(0xFFD4D7DA),
),
),
SizedBox(width: 10,),
TextButton.icon(
onPressed: () {},
icon: Icon(Icons.person_outline),
label: Container(
width: 100, // change width as you need
height: 70, // change height as you need
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"TextButton 4",
textAlign: TextAlign.left,
maxLines: 2, // change max line you need
),
),
),
style: TextButton.styleFrom(
padding:
EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
backgroundColor: Color(0xFFD4D7DA),
),
),
],
),
],
),
),
),
],
),
),
);
}
}
output:

Just simply use column widget in the label
TextButton.icon(
onPressed: () {},
icon: const Icon(Icons.home, color: Colors.white, size: 30.0),
label: Column(
children: const [
Text(
'Text Button Title',
style: TextStyle(fontFamily: 'Roboto', fontSize: 15.0, color: Colors.white),
),
Text(
'Text Button Subtitle',
style: TextStyle(fontFamily: 'Roboto', fontSize: 15.0, color: Colors.white),
),
],
),
style: TextButton.styleFrom(
padding: const EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
backgroundColor: const Color(0xFFD4D7DA),
),
),
OR
You can simply use Row widget
InkWell(
onTap: () {},
child: Container(
padding: const EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
color: const Color(0xFFD4D7DA),
child: Row(
children: const [
Icon(Icons.home, color: Colors.white, size: 30.0),
SizedBox(width: 12),
Expanded(
child: Text(
'Text Button 1',
softWrap: true,
style: TextStyle(fontFamily: 'Roboto', fontSize: 15.0, color: Colors.white),
),
),
],
),
),
),

To create UI like this, you just need to follow these steps:
Take a Column widget.
Inside column, take a Align(alignment:Alignment.left, child: Text("Menu Buttons") )
After that take two Rows
Row(children: [
Container(
height: 60,
width: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [Icon(Icons.add), Text("Text")])),
Container(
height: 60,
width: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [Icon(Icons.add), Text("Text")])),
]),

How can I wrap text and an icon in a row such that text is exactly at the center and icon is at the right end in flutter

I want to wrap text and an icon in a row such that text is exactly at the center and icon is at the right end in flutter
Row(
children: [
Center(
child: Text(
"Add Child",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.indigo[900],
),
),
),
Padding(
padding: const EdgeInsets.only(top: 1),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
IconButton(
icon: Icon(Icons.close),
iconSize: 18,
color: Colors.black,
onPressed: () {
Navigator.pop(context);
},
),
],
),
),
],
),

Try this
Widget _iconButton() {
return Container(
height: 40,
width: MediaQuery.of(context).size.width - 80,
decoration: BoxDecoration(
color: Color(0xff303030),
borderRadius: BorderRadius.circular(5),
),
child: Stack(
alignment: Alignment.center,
children: [
Text(
'Add',
style: TextStyle(color: Colors.white, fontSize: 18),
),
Positioned(
right: 8,
child: Container(
height: 30,
width: 30,
padding: EdgeInsets.all(6),
child: Icon(Icons.add),
),
),
],
),
);
}