skip to Main Content

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.

Screenshot

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


  1. 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 use Expanded instead

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

    SizedBox(
      width: double.infinity, // or set a specific width based on your design
      height: double.infinity, // or set a specific height based on yourdesign
    

    child: IconButton(
    iconSize: 120,
    color: Theme.of(context).cardColor,
    onPressed: isRunning ? onPausePressed : onStartPressed,
    icon: Icon(
    isRunning
    ? Icons.pause_circle_outline
    : Icons.play_circle_outline,
    ),
    ),
    ),

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