I’m making a pomodoro app in flutter right now and I’m almost finished except I can’t position and modify the size of the Container that shows the pomodoros text and the number of pomodoros.
`
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 totalPomodoros = 0;
late Timer timer;
// late is a modifier that means that you don't have to initialize the property immediately but you have a promise (a contract) that you will initialize the property before you use it
// it basically means you'll initializer later
void onTick(Timer timer) {
if (totalSeconds == 0) {
setState(() {
totalPomodoros = totalPomodoros + 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;
}); //onTick() will gonna call the function immidiately
}
void onPausePressed() {
timer.cancel();
setState(() {
isRunning = false;
});
}
void onResetPressed() {
timer.cancel();
setState(() {
isRunning = false;
totalSeconds = twentyFiveMinutes; //totalSeconds;
});
}
String format(int seconds) {
var duration = Duration(seconds: seconds);
print(duration.toString());
print(duration.toString().split("."));
print(duration.toString().split(".").first);
print(duration.toString().split(".").first.substring(2, 7));
return duration.toString().split(".").first.substring(
2,
7,
); //Splits the string at matches of [pattern] and returns a list of substrings.
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Theme.of(context).backgroundColor,
body: Column(
children: [
Flexible(
flex: 1,
child: Container(
child: Text(
format(totalSeconds),
style: TextStyle(
color: Theme.of(context).cardColor,
fontSize: 89,
fontWeight: FontWeight.w600,
),
),
),
),
Flexible(
flex: 3,
child: Center(
child: IconButton(
iconSize: 120,
color: Theme.of(context).cardColor,
onPressed: isRunning ? onPausePressed : onStartPressed,
icon: Icon(
isRunning
? Icons.pause_circle_outline_outlined
: Icons.play_circle_outlined,
),
),
),
),
//child ==> Creates a widget that controls how a child of a [Row], [Column], or [Flex] flexes. Thus, must use child, not children
//Column ==> Creates a vertical array of children. Thus, must use children, not child
Flexible(
flex: 3,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
iconSize: 100,
color: Theme.of(context).cardColor,
onPressed: isRunning ? onResetPressed : onResetPressed,
icon: const Icon(
Icons.restore_outlined,
),
),
],
),
),
Flexible(
flex: 1,
child: Row(
children: [
Expanded(
child: Container(
//alignment: AlignmentDirectional.bottomEnd,
decoration: BoxDecoration(
color: Theme.of(context).cardColor,
borderRadius: BorderRadius.circular(50)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Pomodoros',
style: TextStyle(
fontSize: 20,
color: Theme.of(context).textTheme.headline1!.color,
fontWeight: FontWeight.w600,
),
),
Text(
'$totalPomodoros',
style: TextStyle(
fontSize: 58,
color: Theme.of(context).textTheme.headline1!.color,
fontWeight: FontWeight.w600,
),
),
],
),
),
),
],
),
),
], // Flexible alows you to create UIs that don't really have hard coded values like 200 pixels tall or 100 pixels wide
// alows you to create UIs that are more flexible, more elastic, more based on proportions
// can specify the ratio so that there is the least difference between the IOS and the Android platform
),
);
}
}
I tried to add alignment: AlignmentDirectional.bottomEnd syntex but turned out it works way differnt than I expected.
child: Container(
alignment: AlignmentDirectional.bottomEnd,
decoration: BoxDecoration(
color: Theme.of(context).cardColor,
borderRadius: BorderRadius.circular(50)),
I’m expecting to position the container at the bottom of the UI and resize it a little bigger
2
Answers
At first, you need to remove all flex values from your flexible widget. Then, add Spacer in between all flexible widgets. In the last widget (Pomodoros Widget) add flex to increase its height. You can also wrap your column with SafeArea to avoid mobiles top status bar and bottom bar (optional). Check the following code if it answers your question:
I solve your issue like this:
Some comments also added for set Container width and set position of text also you can change below code for your ui
I hope it’s help you..
Happy Coding :}