Develop Reference

Flutter: Avoid Text Widget re-centering when Timer is active

I have this flutter app with a Scaffold in which i have put the following container.
This container contains the timer's minute and seconds, and two buttons.
I am trying to avoid the Text widget to re-centers when Timer is active. This seems to happens because the Text widget changes size when a different digit is showed.
I tried to wrap the Text widget with an Expanded widget, but it didn't solve the issue. How can i solve this?
Container(
height: size.height * 0.40,
width: size.width * 0.80,
decoration: BoxDecoration(
color: Color(0xFFf4f6fa),
borderRadius: BorderRadius.circular(29.5)),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Text(
"${f.format(_minutes)}:${f.format(_seconds)}",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 80,
color: Color(0xff7165E3),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
// STOP BUTTON
Container(
decoration: BoxDecoration(
color: Colors.grey[800],
shape: BoxShape.circle,
),
height: 90,
width: 90,
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
Colors.grey[800]),
shape: MaterialStateProperty.all(
CircleBorder()),
),
onPressed: () {
setState(() {
_stopTimer();
});
},
child: Container(
alignment: Alignment.center,
child: Text(
"Annulla",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
),
// START BUTTON
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
),
height: 90,
width: 90,
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
Color(0xff7165E3)),
shape: MaterialStateProperty.all(
CircleBorder()),
),
onPressed: () {
_startTimer();
},
child: Container(
alignment: Alignment.center,
child: Text(
"Avvia",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
),
],
),
],
),
),

This happens because of the font you are using.
The font you use dose not have negative space. Try to use some font with negative space adjusted. I Roboto Mono is a font that have negative space.
In the above pic the characters take equal space.
pubspec.yaml
google_fonts: ^2.1.0
sport_screen.dart
Text(
"${f.format(_minutes)}:${f.format(_seconds)}",
textAlign: TextAlign.center,
style: GoogleFonts.robotoMono(
fontSize: 80.0,
color: const Color(0xff7165E3),
),
)
refer here for more about fonts and negative space.
Default Font
Monospace Font

You can use FontFeature.tabularFigures()
Example:
Text(
timerText,
style: TextStyle(
fontFeatures: [
FontFeature.tabularFigures(),
],
),
),

Flutter OutlinedButton with icon ripple color

I am trying to use Outlined Button with icon, when if I set a color for the icon, it also changes the ripple effect color.
Widget build(BuildContext context) => Container(
margin: EdgeInsets.symmetric(horizontal: 20),
padding: EdgeInsets.all(4),
child: OutlinedButton.icon(
label: Text(
'Sign In With Google',
style: TextStyle(
color: Colors.black,
fontFamily: "RobotoCondensed",
fontWeight: FontWeight.bold,
fontSize: 16),
),
style: OutlinedButton.styleFrom(
shape: StadiumBorder(),
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
side: BorderSide(width: 1, color: Colors.black),
),
icon: FaIcon(FontAwesomeIcons.google, color: Colors.red),
onPressed: () {
final provider =
Provider.of<GoogleSignInProvider>(context, listen: false);
provider.login();
},
),
);
Can someone help me understand how can I define the ripple color to stay as black?

I don't know if I understood correctly, but try adding foregroundColor in style:
style: OutlinedButton.styleFrom(
...
foregroundColor: Colors.black, //change colour here
),

Why does my Flutter app look fine on the IOS emulator but overflow on Android?

I understand that there are different screen sizes, but is there a way to account for that? I also don't think the screen sizes are that different. The emulator for Android is a nexus 6 and the IOS emulator is an iphone 11, which is a difference of .14 inches. The IOS version fits comfortably while the Android overflows by a lot. Attached are screenshots.
How would I fix this, aside from squishing everything closer together? Is there a way to make everything proportional to screen size, so it looks the same on IOS but then scales down to the Android phone? My Dart code is below:
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: CircleAvatar(
radius: 100.0,
backgroundImage: AssetImage('images/headshot.jpg'),
),
),
SizedBox(
height: 0.0,
),
Container(
child: Text(
'Lawrence Jing',
style: TextStyle(
fontSize: 50,
color: Colors.white,
fontFamily: 'Dancing_Script'),
),
),
SizedBox(
height: 10.0,
),
Container(
child: Text(
'SERTIFIED CASTING INTERN',
style: TextStyle(
fontSize: 20,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
Card(
color: Colors.amberAccent,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.school),
SizedBox(
width: 10.0,
),
VerticalDivider(),
],
),
title: Text(
'University of Michigan',
style: TextStyle(
color: Colors.blue,
fontSize: 19.0,
fontWeight: FontWeight.bold,
),
),
enabled: false,
),
),
SizedBox(
height: 23.0,
width: 200.0,
child: Divider(
color: Colors.teal[200],
),
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.phone,
color: Colors.teal,
),
title: Text(
'(650)278-7409',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("tel:+1234"),
onLongPress: () => launch("sms: 1234"),
),
),
SizedBox(
height: 10.0,
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.email,
color: Colors.teal,
),
title: Text(
'lajing#umich.edu',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("mailto:email"),
),
),
SizedBox(
height: 10.0,
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.account_circle,
color: Colors.teal,
),
title: Text(
'LinkedIn',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("https://www.linkedin.com/in/lajing/"),
),
),
SizedBox(
height: 10.0,
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.code,
color: Colors.teal,
),
title: Text(
'GitHub',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("https://github.com/LarryJing"),
),
),
],
),
),
),
);}
As you can see, the size of everything is pretty much hardcoded.

You should be use SingleChildScrollView as parent of Column so if space not available then it will scrollable (or) you can use ListView instead of Column
For Example
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: CircleAvatar(
radius: 100.0,
backgroundImage: AssetImage('images/headshot.jpg'),
),
),
SizedBox(
height: 0.0,
),
Container(
child: Text(
'Lawrence Jing',
style: TextStyle(
fontSize: 50,
color: Colors.white,
fontFamily: 'Dancing_Script'),
),
),
SizedBox(
height: 10.0,
),
Container(
child: Text(
'SERTIFIED CASTING INTERN',
style: TextStyle(
fontSize: 20,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
Card(
color: Colors.amberAccent,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.school),
SizedBox(
width: 10.0,
),
VerticalDivider(),
],
),
title: Text(
'University of Michigan',
style: TextStyle(
color: Colors.blue,
fontSize: 19.0,
fontWeight: FontWeight.bold,
),
),
enabled: false,
),
),
SizedBox(
height: 23.0,
width: 200.0,
child: Divider(
color: Colors.teal[200],
),
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.phone,
color: Colors.teal,
),
title: Text(
'(650)278-7409',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("tel:+1234"),
onLongPress: () => launch("sms: 1234"),
),
),
SizedBox(
height: 10.0,
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.email,
color: Colors.teal,
),
title: Text(
'lajing#umich.edu',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("mailto:email"),
),
),
SizedBox(
height: 10.0,
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.account_circle,
color: Colors.teal,
),
title: Text(
'LinkedIn',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("https://www.linkedin.com/in/lajing/"),
),
),
SizedBox(
height: 10.0,
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.code,
color: Colors.teal,
),
title: Text(
'GitHub',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("https://github.com/LarryJing"),
),
),
],
),
),
),
),
);
}

Since you are using SizedBox with the specific height it will overflow if the screen size is small.You can use MediaQuery.of(context).size.height for using height of SizedBox as percentage or screens total height
The second approach would be to use Spacer and Expanded to space the content according to the available space in the Column.
Hope this helps.

How can I place a divider between those list tiles

I'm new to coding and I've just started my first project, I'm just reading flutter's documentation and trying to do stuff on my own, but this one's been kinda tough, how can i place a divider between those list tiles?
I've tried some stuff like ListView.separated and similar alternatives, couldn't make it work on my code, probably cause the structure of it is all wrong somehow, any tips?
Widget build(BuildContext context) {
return Container(
child: Drawer(
child: ListView(
children: <Widget>[
UserAccountsDrawerHeader(
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.blueGrey,
child: Text(
"LPI",
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.w700,
),
),
),
accountName: Text(
'Lucas Pereira Issler',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w700,
),
),
accountEmail: Text(
'lucas.issler#ftc.edu.br',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
),
),
),
ListTile(
leading: Icon(
Icons.pets,
size: 40,
color: Colors.blueAccent,
),
title: Text('Adoção',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w800,
color: Colors.blueAccent,
)),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: Icon(
Icons.remove_red_eye,
size: 40,
color: Colors.blueAccent,
),
title: Text('Desaparecidos',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w800,
color: Colors.blueAccent,
)),
onTap: () {
Navigator.pop(context);
},
),

You need to make a separate ListView.separated() for the ListTile. Checkout this DartPad, hope it helps.

Row Widget use entire column

Try to build a custom button with X sign on the right, but when I add this to a Wrap widget, it used up the entire row.
this is the code for building the button:
Material _buildDeleteFilter(String caption, Function onTap) {
return Material(
color: Colors.orange,
borderRadius: BorderRadius.circular(5),
child: InkWell(
onTap: onTap,
splashColor: Colors.deepOrange,
child: Container(
padding: EdgeInsets.symmetric(vertical: 2, horizontal: 5),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(5)),
child: Row(
children: <Widget>[
Text(
caption,
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w500),
),
Icon(
Icons.close,
size: 20,
color: Colors.white,
)
],
),
),
),
);
}