Why is there so much space between Rows in my Flutter code? - flutter

Positioned(
bottom: 15,
left: 15,
child: SizedBox(
height: 100,
child: Column(
children: [
Row(
children: [
ElevatedButton(
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
minimumSize: Size(40, 20),
backgroundColor: colorSet.buttonForeground,
),
onPressed: () {},
child: Text(
'Once',
style: TextStyle(
color: colorSet.text,
fontSize: 12,
),
),
),
SizedBox(
width: 8,
),
ElevatedButton(
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
minimumSize: Size(40, 20),
backgroundColor: colorSet.buttonForeground,
),
onPressed: () {},
child: Text(
'Specific Days',
style: TextStyle(
color: colorSet.text,
fontSize: 12,
),
),
),
],
),
Row(
children: [
ElevatedButton(
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
minimumSize: Size(40, 20),
backgroundColor: colorSet.buttonForeground,
),
onPressed: () {},
child: Text(
'Daily',
style: TextStyle(
color: colorSet.text,
fontSize: 12,
),
),
),
SizedBox(
width: 3,
),
ElevatedButton(
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
minimumSize: Size(40, 20),
backgroundColor: colorSet.buttonForeground,
),
onPressed: () {},
child: Text(
'Weekly',
style: TextStyle(
color: colorSet.text,
fontSize: 12,
),
),
),
],
),
],
),
))
Hi, I am relatively new at flutter. I am trying to build a card for chores, and this particular part of the card is giving me problems.
I have no idea, why is there so much vertical space between each row (each row basically having two buttons). I've tried several things, to solve this, but I give up for now and come here for advice.
Thanks!


Try this, remove the Sizedbox(height:100)
I addition, you could remove the SizedBox(width : 8) inside your rows and try Row(mainAxisAlignment:MainAxisAlignment.spaceBetween, children:[]);
Positioned(
bottom: 15,
left: 15,
child: Column(
children: [
Row(
mainAxisAlignment:MainAxisAlignment.spaceBetween,
children: [
ElevatedButton(
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
minimumSize: Size(40, 20),
backgroundColor: colorSet.buttonForeground,
),
onPressed: () {},
child: Text(
'Once',
style: TextStyle(
color: colorSet.text,
fontSize: 12,
),
),
),
ElevatedButton(
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
minimumSize: Size(40, 20),
backgroundColor: colorSet.buttonForeground,
),
onPressed: () {},
child: Text(
'Specific Days',
style: TextStyle(
color: colorSet.text,
fontSize: 12,
),
),
),
],
),
Row(
mainAxisAlignment:MainAxisAlignment.spaceBetween,
children: [
ElevatedButton(
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
minimumSize: Size(40, 20),
backgroundColor: colorSet.buttonForeground,
),
onPressed: () {},
child: Text(
'Daily',
style: TextStyle(
color: colorSet.text,
fontSize: 12,
),
),
),
ElevatedButton(
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
minimumSize: Size(40, 20),
backgroundColor: colorSet.buttonForeground,
),
onPressed: () {},
child: Text(
'Weekly',
style: TextStyle(
color: colorSet.text,
fontSize: 12,
),
),
),
],
),
],
))

Related

How can I align my drawer elements center in Flutter?

I build a drawer as in the image using Flutter, but the elements of the drawer are showed in the left side and its not beautiful like this. I would like to show them in the center of the drawer or at least a little more to the right. Below you can find my code as a reference. It would be great if someone here can give a little help.
img
return Scaffold(
endDrawer: Drawer(backgroundColor: const Color(0xFF262533),
elevation: 10,
child: ListView(
children: [
PopupMenuButton(
tooltip: '',
child: Text(
'Escorts',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[]),
Padding(padding: EdgeInsets.all(10.0)),
PopupMenuButton(
tooltip: '',
color: Color(0xFF262533),
position: PopupMenuPosition.under,
child: Text(
'Agenturen & Clubs',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[
const PopupMenuItem(
child: ListTile(
title: Text(
'Escortagenturen',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Bordelle',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Laufhauser',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Saunaclubs',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Domina & BDSM-Studios',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Tantra & Massaage-Studios',
style:
TextStyle(color: Colors.white),
),
),
),
]),
PopupMenuButton(
tooltip: '',
child: Text(
'Inserieren',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[]),
Padding(padding: EdgeInsets.all(10.0)),
PopupMenuButton(
tooltip: '',
color: Color(0xFF262533),
position: PopupMenuPosition.under,
child: Text(
'Werben',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[
const PopupMenuItem(
child: ListTile(
title: Text(
'Werbenformate',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Preise',
style:
TextStyle(color: Colors.white),
),
),
),
]),
Padding(padding: EdgeInsets.all(10.0)),
PopupMenuButton(
tooltip: '',
color: Color(0xFF262533),
position: PopupMenuPosition.under,
child: Text(
'Blog',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[
const PopupMenuItem(
child: ListTile(
title: Text(
'Archiv',
style:
TextStyle(color: Colors.white),
),
),
),
]),
const Padding(
padding: EdgeInsets.all(10.0),
),
PopupMenuButton(
position: PopupMenuPosition.under,
tooltip: '',
child: const Text(
'Kontakt',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[]),
],
),
),

replace ListView with Column widget
and inside Column make
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
code:
endDrawer: Drawer(
backgroundColor: const Color(0xFF262533),
elevation: 10,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
//todo
]
))

you can align your element by use Container or Column in my case I build drawer like this
Drawer(
backgroundColor: black,
child: Column(
children: [
SizedBox(
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: black,
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: accent,
width: 0.5,
),
),
height: MediaQuery.of(context).size.width / 2,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
"assets/logs.png",
height: 80,
width: 80,
),
const Text(
"Name App",
style: TextStyle(
color: grey,
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
const Text(
"some body text",
style: TextStyle(
color: white,
fontSize: 14,
),
),
],
)),
),
const SizedBox(
height: 10,
),
Expanded(
child: ListView(
children: [
const Padding(
padding: EdgeInsets.only(right: 10),
child: Text(
"body text",
style: TextStyle(
color: white,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: const EdgeInsets.only(right: 15),
child: Row(
children: const [
Icon(
Icons.check_circle_outline_outlined,
size: 20,
color: accent,
),
SizedBox(
width: 10,
),
Text(
"some body text",
style: TextStyle(
color: grey,
fontSize: 14,
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(right: 15, top: 4),
child: Row(
children: const [
Icon(
Icons.check_circle_outline_outlined,
color: accent,
size: 20,
),
SizedBox(
width: 10,
),
Text(
"some body text",
style: TextStyle(
color: grey,
fontSize: 14,
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(right: 15, top: 4),
child: Row(
children: const [
Icon(
Icons.check_circle_outline_outlined,
size: 20,
color: accent,
),
SizedBox(
width: 10,
),
Text(
"some body text",
style: TextStyle(
color: grey,
fontSize: 14,
),
),
],
),
),
const Divider(
endIndent: 10,
indent: 10,
color: grey,
),
ListTile(
dense: true,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const AboutPage()));
},
leading: const Icon(
Icons.info_outlined,
color: accent,
),
title: const Text(
"About App",
style: TextStyle(
color: white,
fontSize: 14,
),
),
trailing: const Icon(
Icons.arrow_back_ios_new,
color: grey,
size: 15,
),
),
ListTile(
dense: true,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const AboutMe()));
},
leading: const Icon(
Icons.engineering,
color: accent,
),
title: const Text(
"About",
style: TextStyle(
color: white,
fontSize: 14,
),
),
trailing: const Icon(
Icons.arrow_back_ios_new,
color: grey,
size: 15,
),
),
],
),
),
Container(
padding: const EdgeInsets.only(left: 8, right: 8),
child: const Text(
"Folow me Now !",
style: TextStyle(fontSize: 12, color: grey),
textAlign: TextAlign.center,
)),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: black,
),
margin: const EdgeInsets.all(10),
child: Row(
children: [
const Spacer(),
IconButton(
onPressed: () {
},
icon: const Icon(
FontAwesomeIcons.facebook,
color: accent,
),
),
IconButton(
onPressed: () {
},
icon: const Icon(
FontAwesomeIcons.instagram,
color: accent,
),
),
IconButton(
onPressed: () {},
icon: const Icon(
FontAwesomeIcons.whatsapp,
color: accent,
),
),
IconButton(
onPressed: () {},
icon: const Icon(
FontAwesomeIcons.telegram,
color: accent,
),
),
const Spacer(),
],
),
),
],
),
),

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

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),
)),
)),

How to use multiply rows with ResponsiveDatatable?

I want to create a second row after the icon "Bearbeiten", but this is not possible, because I need to use "title" for the first row. child: ResponsiveDatatable(title: Row(
I want to have a code like this below. How can I use ResponsiveDatatable, but although use a second row for my buttons?
This image shows, how the code looks at the moment
(without the second row). Because there is not enough space in one row, I want to create a second row.
How can I do this with a ResponsiveDatatable?
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(0),
constraints: BoxConstraints(
maxHeight: 700,
),
child: Card(
elevation: 1,
shadowColor: Colors.black,
clipBehavior: Clip.none,
child: ResponsiveDatatable(
title: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//add user to the list
TextButton.icon(
onPressed: () => {
Navigator.of(context).pushNamed(RegristrationRoute)
},
icon: Icon(Icons.add,
color: Colors.black,
),
label: Text("Hinzufügen",
style: TextStyle(
color: Colors.black,
)
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.grey),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(10)),
),
),
SizedBox(width: 30,),
TextButton.icon(
onPressed: () => {
Navigator.of(context).pushNamed(RegristrationRoute)
//Pop-up Fenster für die Registration machen, wenn Zeit - ansonsten registrationsfenster weiterleiten
},
icon: Icon(
IconData(0xf00d, fontFamily: 'MaterialIcons'),
color: Colors.black,
),
label: Text("Bearbeiten",
style: TextStyle(
color: Colors.black,
)
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.grey),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(10)),
),
),]),
child: Row( //error, I am not allowed to use child because of title
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(width: 30,),
TextButton.icon(
onPressed: () => {},
icon: Icon(
IconData(0xe3b1, fontFamily: 'MaterialIcons'),
color: Colors.black,
),
label: Text("Sperren",
style: TextStyle(
color: Colors.black,
)
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.grey),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(10)),
),
),
SizedBox(width: 30,),
TextButton.icon(
onPressed: () => {},
icon: Icon(
IconData(0xe3b0, fontFamily: 'MaterialIcons'),
color: Colors.black,
),
label: Text("Freischalten",
style: TextStyle(
color: Colors.black,
)
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.grey),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(10)),
),
),
SizedBox(width: 30,),
TextButton.icon(
onPressed: () async => {
await AuthProvider.deleteUser(uid),
print(uid + 'user gelöscht')
},
icon: Icon(
IconData(0xe1bb, fontFamily: 'MaterialIcons'),
color: Colors.black,
),
label: Text("Löschen",
style: TextStyle(
color: Colors.black,
)
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.grey),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(10)),
),
),
],
),

What you are expecting is the functionality of the Column.
ResponsiveDatatable(
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: [
TextButton.icon(
onPressed: () => {
Navigator.of(context)
.pushNamed(RegristrationRoute)
},
icon: Icon(
Icons.add,
color: Colors.black,
),
label: Text("Hinzufügen",
style: TextStyle(
color: Colors.black,
)),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(
Colors.grey),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(10)),
),
),
SizedBox(width: 30,),
TextButton.icon(
onPressed: () => {
Navigator.of(context)
.pushNamed(RegristrationRoute)
//Pop-up Fenster für die Registration machen, wenn Zeit - ansonsten registrationsfenster weiterleiten
},
icon: Icon(
IconData(0xf00d, fontFamily: 'MaterialIcons'),
color: Colors.black,
),
label: Text("Bearbeiten",
style: TextStyle(
color: Colors.black,
)),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(
Colors.grey),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(10)),
),
),
],
),
SizedBox(height: 10,),
Row(
children: [
TextButton.icon(
onPressed: () => {},
icon: Icon(
IconData(0xe3b1, fontFamily: 'MaterialIcons'),
color: Colors.black,
),
label: Text("Sperren",
style: TextStyle(
color: Colors.black,
)),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(
Colors.grey),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(10)),
),
),
SizedBox(width: 30,),
TextButton.icon(
onPressed: () => {},
icon: Icon(
IconData(0xe3b0, fontFamily: 'MaterialIcons'),
color: Colors.black,
),
label: Text("Freischalten",
style: TextStyle(
color: Colors.black,
)),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(
Colors.grey),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(10)),
),
),
SizedBox(width: 30,),
TextButton.icon(
onPressed: () async => {
// await AuthProvider.deleteUser(uid),
// print(uid + 'user gelöscht')
},
icon: Icon(
IconData(0xe1bb, fontFamily: 'MaterialIcons'),
color: Colors.black,
),
label: Text("Löschen",
style: TextStyle(
color: Colors.black,
)),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(
Colors.grey),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(10)),
),
)
],
),
]),
source: [],
)))
And there is a minor error in the parenthesis closing also.
Note: It will solve your problem but still it will not meet responsiveness.

I had the similar problem.
Instead of TextButton, I made a button-UI in container and wrapped it with InkWell (A rectangular area of a Material that responds to touch).
InkWell(
// on Tap function used and call back function as defined here
onTap: () {
setState(() {
// state will be set when the inkwell area is tapped
inkwell='Inkwell Tapped';
});
},
onLongPress: () {
setState(() {
inkwell='InkWell Long Pressed';
});
},
child: Container(
// container displaying the text
color: Colors.green,
width: 120,
height: 70,
child: Center(
child: Text(
'Button text',
))),
),

OutlinedButton exception when trying to set max size

I'm trying to create something like the below image:
I used two OutlinedButton in a row:
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
OutlinedButton(
child: const Icon(
Icons.arrow_back,
color: colorBackButton,
),
style: ButtonStyle(
fixedSize: MaterialStateProperty.resolveWith(
(states) => Size(65.0, 65.0)))),
Padding(padding: EdgeInsets.only(left: 14.0)),
OutlinedButton(
child: Text(
'Next',
style: GoogleFonts.inter(
textStyle: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white)),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.resolveWith((states) {
return colorPrimaryButton;
}),
}),
])
This has led me to this result:
I tried to wrap the Next button with Sizedbox.expand and also add a minimumSize to the button style:
minimumSize: MaterialStateProperty.resolveWith((states) => const Size.fromHeight(55.0))
Both results with a BoxConstraints forces an infinite width. These invalid constraints were provided to RenderPhysicalShape's layout() function by t
Digging into the exception, it's written:
The offending constraints were: BoxConstraints(w=Infinity, 55.0<=h<=Infinity)
How can I make the Next button fill the entire row's space (discluding the padding of course)?

You can wrap with Expanded widget to get maximum available space.
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
OutlinedButton(
onPressed: () {},
child: const Icon(
Icons.arrow_back,
color: Colors.amber,
),
style: ButtonStyle(
fixedSize: MaterialStateProperty.resolveWith(
(states) => const Size(65.0, 65.0),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 14.0),
child: OutlinedButton(
onPressed: () {},
child: const Text('Next',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white)),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.deepPurple),
fixedSize: MaterialStateProperty.resolveWith(
(states) => const Size(65.0, 65.0),
),
),
),
),
),
],
);
You can play with padding. Also, you can use LayoutBuilder.

try use expanded widget Wrap next button with expanded like that
Expanded(
child: OutlinedButton(
child: Text(
'Next',
style: GoogleFonts.inter(
textStyle: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white)),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.resolveWith((states) {
return colorPrimaryButton;
}),
}),
),

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")])),
]),