I’m making a Pomodoro app. I’m configuring the screen as flexible, but the flexible one with the iconbutton doesn’t seem to be working properly. It will look like the picture.
import 'dart:async';
import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
static const twentyFiveMinutes = 1500;
int totalSeconds = twentyFiveMinutes;
bool isRunning = false;
int totalPomodoro = 0;
late Timer timer;
void onTick(Timer timer) {
if (totalSeconds == 0) {
setState(() {
totalPomodoro = totalPomodoro + 1;
isRunning = false;
totalSeconds = twentyFiveMinutes;
});
timer.cancel();
} else {
setState(() {
totalSeconds = totalSeconds - 1;
});
}
}
void onStartPressed() {
timer = Timer.periodic(const Duration(seconds: 1), onTick);
setState(() {
isRunning = true;
});
}
void onPausePressed() {
timer.cancel();
setState(() {
isRunning = false;
});
}
void onResetPressed() {
setState(() {
totalSeconds = twentyFiveMinutes;
isRunning = false;
timer.cancel();
});
}
String format(int seconds) {
var duration = Duration(seconds: seconds);
return duration.toString().split('.').first.substring(2);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: isRunning
? Theme.of(context).secondaryHeaderColor
: Theme.of(context).colorScheme.background,
body: Column(
children: [
Flexible(
flex: 1,
child: Container(
alignment: Alignment.bottomCenter,
child: Text(
format(totalSeconds),
style: TextStyle(
color: Theme.of(context).cardColor,
fontSize: 89,
fontWeight: FontWeight.w600,
),
),
),
),
Flexible(
flex: 3,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
iconSize: 120,
color: Theme.of(context).cardColor,
onPressed: isRunning ? onPausePressed : onStartPressed,
icon: Icon(
isRunning
? Icons.pause_circle_outline
: Icons.play_circle_outline,
),
),
IconButton(
iconSize: 120,
color: Theme.of(context).cardColor,
onPressed: onResetPressed,
icon: const Icon(Icons.rotate_left_sharp))
],
),
),
Flexible(
flex: 1,
child: Row(
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).cardColor,
borderRadius:
const BorderRadius.vertical(top: Radius.circular(50)),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Pomodoros',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w600,
color:
Theme.of(context).textTheme.displayLarge!.color,
),
),
Text(
'$totalPomodoro',
style: TextStyle(
fontSize: 58,
fontWeight: FontWeight.w600,
color:
Theme.of(context).textTheme.displayLarge!.color,
),
),
],
),
),
),
],
),
),
],
),
);
}
}
I tried changing the value of flex, but only the flexible with the iconbutton does not change in size.
2
Answers
I’m assuming you mean that you see that the space it takes isn’t 3 times as big as the other to. You expected it to be because you gave it flex 3 and the other two flex 1. The thing is though that it referes to the maximum space it takes. A
Flexible
only takes as much space as necessary. If you want it to take the full flex available you need to useExpanded
insteadIconButtons have a fixed size based on the iconSize property and might not adapt well to changes in the parent Flexible widget’s size. To make the IconButtons responsive to changes in the Flexible’s size, you can try wrapping the IconButtons with a SizedBox or a Container widget and set their width and height properties to double. infinity or to a percentage of the parent’s size.
child: IconButton(
iconSize: 120,
color: Theme.of(context).cardColor,
onPressed: isRunning ? onPausePressed : onStartPressed,
icon: Icon(
isRunning
? Icons.pause_circle_outline
: Icons.play_circle_outline,
),
),
),