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’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.
enter image description here
I tried changing the value of flex, but only the flexible with the iconbutton does not change in size.
New contributor
YoungKwang Kim is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.