skip to Main Content

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
      ),
    );
  }
}

Current App UI

I tried to add alignment: AlignmentDirectional.bottomEnd syntex but turned out it works way differnt than I expected.

Error version App UI

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

sample

2

Answers


  1. 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:

    @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Theme.of(context).backgroundColor,
          body: SafeArea(
            child: Column(
              mainAxisSize: MainAxisSize.max,
              children: [
                Flexible(
                  child: Container(
                    child: Text(
                      format(totalSeconds),
                      style: TextStyle(
                        color: Theme.of(context).cardColor,
                        fontSize: 89,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ),
                Spacer(),
                Flexible(
                  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,
                      ),
                    ),
                  ),
                ),
                Spacer(),
                //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(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      IconButton(
                        iconSize: 100,
                        color: Theme.of(context).cardColor,
                        onPressed: isRunning ? onResetPressed : onResetPressed,
                        icon: const Icon(
                          Icons.restore_outlined,
                        ),
                      ),
                    ],
                  ),
                ),
                Spacer(),
                Flexible(
                  flex: 2,
                  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
            ),
          ),
        );
      }
    

    With SafeArea

    Login or Signup to reply.
  2. 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

      body: Column(
        children: [
          Flexible(
            child: Container(
              child: Text(
                format(totalSeconds),
                style: TextStyle(
                  color: Theme.of(context).cardColor,
                  fontSize: 89,
                  fontWeight: FontWeight.w600,
                ),
              ),
            ),
          ),
          Spacer(),
    
          Flexible(
            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,
                ),
              ),
            ),
          ),
          Spacer(),
          //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(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  iconSize: 100,
                  color: Theme.of(context).cardColor,
                  onPressed: isRunning ? onResetPressed : onResetPressed,
                  icon: const Icon(
                    Icons.restore_outlined,
                  ),
                ),
              ],
            ),
          ),
          Spacer(),
          Flexible(
            flex: 2,
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    decoration: BoxDecoration(
                        color: Theme.of(context).cardColor,
                        borderRadius: BorderRadius.circular(50)),
                    child: Column(
                      //You can change position from here
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.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 hope it’s help you..
    Happy Coding :}

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search