I’m trying to creat a grid which contains elevated buttons. Each button has an icon and text below it. The text varies in length. When the text is too long, part of the word breaks into a new line rather than resizing to a smaller size. When I wrap it with Flexible or Expandable, it doesn’t change.
enter image description here
When I use a bigger screen size, the content of the button doesn’t enlarge.
enter image description here
The whole code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/widgets.dart';
import 'package:pocket_nephrology/hypona_correction.dart';
import 'package:pocket_nephrology/water_deficit.dart';
import 'package:pocket_nephrology/ufperweight.dart';
import 'package:pocket_nephrology/osmolargap.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'abg_analyzer.dart';
void main() {
runApp(const MaterialApp(
debugShowCheckedModeBanner: false,
home: MyApp()));
}
const snackBar = SnackBar(
content: Text('Developed by Ratib Mahfouz M.D.'),
);
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: double.infinity,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
colors: [
Color(0xFF550024),
Color(0xFF870d4c),
Color(0xFFbb4678),
]
)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const SizedBox(height: 20,),
Align(
alignment: Alignment.topRight,
child: IconButton(
icon: const Icon(Icons.info_outlined, size: 30, color: Colors.white),
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(snackBar);
},
),
),
const SizedBox(height: 30,),
const Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Pocket Nephrology", style: TextStyle(color: Colors.white, fontSize: 40, fontWeight: FontWeight.bold,),),
SizedBox(height: 10,),
Text("The ultimate Nephrology tool", style: TextStyle(color: Colors.white, fontFamily: "RobotoMono", fontSize: 18),),
],
),
),
const SizedBox(height: 20),
Expanded(
child: Container(
height: double.infinity,
width: double.infinity,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft: Radius.circular(60), topRight: Radius.circular(60))
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: GridView.count(crossAxisCount: 3,
scrollDirection: Axis.vertical,
mainAxisSpacing: 16,
crossAxisSpacing: 16,
primary: false,
children: <Widget>[
ElevatedButton(
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => const hypona_correction()));
},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),), backgroundColor: const Color(0xFFFFFFFF), disabledForegroundColor: const Color(0xFF959595).withOpacity(0.38), disabledBackgroundColor: const Color(0xFF959595).withOpacity(0.12),
elevation: 2,
),
child:
const Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(5.0),
child: Icon(Icons.science,
color: Color(0xFF560027),
),
),
Flexible(
child: Text('HypoNa nCorrection',
maxLines: 2,
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF880e4f),
),
),
),
],
)
),
ElevatedButton(
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => const Water_Deficit()));
},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),), backgroundColor: const Color(0xFFFFFFFF), disabledForegroundColor: const Color(0xFF959595).withOpacity(0.38), disabledBackgroundColor: const Color(0xFF959595).withOpacity(0.12),
elevation: 2,
),
child:
const Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(5.0),
child: FaIcon(FontAwesomeIcons.faucetDrip,
color: Color(0xFF560027),
),
),
Flexible(
child: Text('Water Deficit',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF880e4f),
),
),
),
],
)
),
ElevatedButton(
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => const abg_analyzer()));
},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),), backgroundColor: const Color(0xFFFFFFFF), disabledForegroundColor: const Color(0xFF959595).withOpacity(0.38), disabledBackgroundColor: const Color(0xFF959595).withOpacity(0.12),
elevation: 2,
),
child:
const Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(5.0),
child: FaIcon(FontAwesomeIcons.calculator,
color: Color(0xFF560027),
),
),
Flexible(
child: Text('ABG Calculator',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF880e4f),
),
),
),
],
)
),
ElevatedButton(
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => const ufperweight()));
},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),), backgroundColor: const Color(0xFFFFFFFF), disabledForegroundColor: const Color(0xFF959595).withOpacity(0.38), disabledBackgroundColor: const Color(0xFF959595).withOpacity(0.12),
elevation: 2,
),
child:
const Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(5.0),
child: FaIcon(FontAwesomeIcons.weightScale,
color: Color(0xFF560027),
),
),
Flexible(
child: Text('UF per Weight',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF880e4f),
),
),
),
],
)
),
ElevatedButton(
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => const osmolargap()));
},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),), backgroundColor: const Color(0xFFFFFFFF), disabledForegroundColor: const Color(0xFF959595).withOpacity(0.38), disabledBackgroundColor: const Color(0xFF959595).withOpacity(0.12),
elevation: 2,
),
child:
const Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(5.0),
child: FaIcon(FontAwesomeIcons.arrowsLeftRight,
color: Color(0xFF560027),
),
),
Flexible(
child: Text('Osmolar Gap',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF880e4f),
),
),
),
],
)
),
ElevatedButton(
onPressed: () {
},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),), backgroundColor: const Color(0xFFFFFFFF), disabledForegroundColor: const Color(0xFF959595).withOpacity(0.38), disabledBackgroundColor: const Color(0xFF959595).withOpacity(0.12),
elevation: 2,
),
child:
const Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(5.0),
child: FaIcon(FontAwesomeIcons.prescriptionBottle,
color: Color(0xFF560027),
),
),
Flexible(
child: Text('Urine Gap',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF880e4f),
),
),
),
],
)
),
]
),
),
),
)
],
),
),
);
}
}
code of interest
ElevatedButton(
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => const hypona_correction()));
},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),), backgroundColor: const Color(0xFFFFFFFF), disabledForegroundColor: const Color(0xFF959595).withOpacity(0.38), disabledBackgroundColor: const Color(0xFF959595).withOpacity(0.12),
elevation: 2,
),
child:
const Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(5.0),
child: Icon(Icons.science,
color: Color(0xFF560027),
),
),
Flexible(
child: Text('HypoNa nCorrection',
maxLines: 2,
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF880e4f),
),
),
),
],
)
),
Thank you.
I tried using expanded and flexible widgets, no effect on the text breaks.