Home > Software design >  How to navigate to another page if time is over and select automatically a feature from new page?
How to navigate to another page if time is over and select automatically a feature from new page?

Time:07-30

I have this design:

enter image description here

If time is over, I want to navigate to this page automatically

enter image description here

This is my code:

home_page_timer.dart

import 'package:braintrinig/animation/LongBreak.dart';
import 'package:braintrinig/animation/ShortBreak.dart';
import 'package:braintrinig/animation/StartPomodoro.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HomePageTimerUI extends StatelessWidget {
bool PomoRed = false;
bool ShortYellow = false;
bool LongBlue = false;


  @override
  Widget build(BuildContext context) {
    return Container(
        height: 600,
        width: double.infinity,
        child: DefaultTabController(
            length: 3,
            child: Scaffold(
                bottomNavigationBar: BottomBar(),
                appBar: AppBar(
                  elevation: 1.0,
                  backgroundColor: Colors.transparent,
                  bottom: PreferredSize(
                    preferredSize: Size.fromHeight(55),
                    child: Container(
                      color: Colors.transparent,
                      child: SafeArea(
                        child: Column(
                          children: <Widget>[
                            TabBar(
                                indicator: UnderlineTabIndicator(
                                    borderSide: BorderSide(
                                        color: Color(0xff3B3B3B), width: 4.0),
                                    insets: EdgeInsets.fromLTRB(
                                        12.0, 12.0, 12.0, 11.0)),
                                indicatorWeight: 15,
                                indicatorSize: TabBarIndicatorSize.label,
                                labelColor: Color(0xff3B3B3B),
                                labelStyle: TextStyle(
                                    fontSize: 12,
                                    letterSpacing: 1.3,
                                    fontWeight: FontWeight.w500),
                                unselectedLabelColor: Color(0xffD7D7D7),
                                tabs: [
                                  Tab(
                                    text: "POMODORO",
                                    icon: Icon(Icons.work_history, size: 40),
                                  ),
                                  Tab(
                                    text: "SHORT BREAK",
                                    icon: Icon(Icons.ramen_dining, size: 40),
                                  ),
                                  Tab(
                                    text: "LONG BREAK",
                                    icon: Icon(Icons.battery_charging_full_rounded,
                                        size: 40),
                                  ),
                                ])
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
                body: TabBarView(
                  children: <Widget>[
                    Center(
                      child: StartPomodoro(),
                    ),
                    Center(
                      child: ShortBreak(),
                    ),
                    Center(
                        child: LongBreak()
                    ),
                  ],
                ))));

  }
}

class BottomBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          FloatingActionButton.extended(
              backgroundColor: Color(0xffF2F2F2),
              onPressed: () {},
            icon: Icon(Icons.settings,
          color: Color(0xff3B3B3B),),
             label: Text("Settings",
          style: TextStyle(color: Color(0xff3B3B3B),
          ),)),
          FloatingActionButton.extended(
              backgroundColor: Color(0xffF2F2F2),
              onPressed: () {},
              icon: Icon(Icons.show_chart,
                color: Color(0xff3B3B3B),),
              label: Text("Performance",
                style: TextStyle(color: Color(0xff3B3B3B),
                ),))
        ],
      ),
    );
  }
}

startpomodoro.dart

import 'dart:async';
import 'package:braintrinig/animation/home_page_timer_ui.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:core';
import 'dart:math' as math;
import 'package:flutter_ringtone_player/flutter_ringtone_player.dart';

import 'ShortBreak.dart';

    class StartPomodoro extends StatefulWidget {
      const StartPomodoro({Key? key}) : super(key: key);
    
      @override
      State<StartPomodoro> createState() => _StartPomodoroState ();
    }
    
    class _StartPomodoroState extends State<StartPomodoro>
        with TickerProviderStateMixin {
      List<bool> isSelected = [true, false];
      late Timer timer;
      late AnimationController controller;
    
      String get countText {
        Duration count = controller.duration! * controller.value;
        return controller.isDismissed
            ? '${controller.duration!.inHours.toString().padLeft(2, '0')}:${(controller.duration!.inMinutes % 60).toString().padLeft(2, '0')}:${(controller.duration!.inSeconds % 60).toString().padLeft(2, '0')}'
            : '${count.inHours.toString().padLeft(2, '0')}:${(count.inMinutes % 60).toString().padLeft(2, '0')}:${(count.inSeconds % 60).toString().padLeft(2, '0')}';
      }
    
      double progress = 1.0;
      bool LongBreak = true;
    
      void notify() {
        if (countText == '00:00:00') {
          FlutterRingtonePlayer.playNotification();
      }
    }
    
      @override
      void initState() {
        super.initState();
        controller = AnimationController(
          vsync: this,
          duration: Duration(seconds: 0),
        );
        controller.addListener(() {
          notify();
          if (controller.isAnimating) {
            setState(() {
              progress = controller.value;
            });
          } else {
            setState(() {
              progress = 1.0;
              LongBreak = true;
            });
          }
        });
      }
    
      @override
      void dispose() {
        controller.dispose();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        ThemeData themeData = Theme.of(context);
        return Scaffold(
          backgroundColor: LongBreak? Color(0xffD94530) : Color(0xff6351c5),
          body: GestureDetector(
            onTap: () {
              if (controller.isDismissed) {
                showModalBottomSheet(
                  context: context,
                  builder: (context) => Container(
                    height:300,
                    child: CupertinoTimerPicker(
                      initialTimerDuration: controller.duration!,
                      onTimerDurationChanged: (time) {
                        setState(() {
                          controller.duration = time;
                        });
                      },
                    ),
                  ),
                );
              }
            },
    
            child: AnimatedBuilder(
                animation: controller,
                builder: (context, child) {
                  return Stack(
                    children: <Widget>[
                      Align(
                        alignment: Alignment.bottomCenter,
                        child: Container(
                          color: Color(0xffD94530),
                          height:
                          controller.value * MediaQuery.of(context).size.height * 0.742,
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.all(8.0),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Expanded(
                              child: Align(
                                alignment: Alignment.bottomCenter,
                                child:
                                Align(
                                  alignment: FractionalOffset.bottomCenter,
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.end,
                                    crossAxisAlignment: CrossAxisAlignment.center,
                                    children: <Widget>[
                                      Text(
                                        countText,
                                        style: TextStyle(
                                          fontSize: 90.0,
                                          color: Color(0xffF2F2F2),),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                AnimatedBuilder(
                                    animation: controller,
                                    builder: (context, child) {
                                      return Padding(
                                        padding: EdgeInsets.symmetric(vertical: 2.0, horizontal: 15.0),
                                      );
                                    }),
                                AnimatedBuilder(
                                    animation: controller,
                                    builder: (context, child) {
                                      return Padding(
                                        padding: EdgeInsets.symmetric(vertical: 2.0, horizontal: 15.0),
                                        child: FloatingActionButton.extended(
                                            backgroundColor: Color(0xffF2F2F2),
                                            onPressed:() {
                                              if (controller.isAnimating) {
                                                controller.stop();
                                                setState(() {
                                                  LongBreak = false;
                                                });
                                              } else {
                                                controller.reverse(
                                                    from: controller.value == 0 ? 1.0 : controller.value);
                                                setState(() {
                                                  LongBreak = false;
                                                });
                                              }
                                            },
                                            icon: Icon(
                                              controller.isAnimating ?
                                              Icons.pause : Icons.play_arrow,
                                              color: Color(0xff3B3B3B),),
                                            label: Text(
                                              controller.isAnimating ?  "PAUSE" : "PLAY",
                                              style: TextStyle(color: Color(0xff3B3B3B)),)),
                                      );
                                    }),
                                SizedBox(width: 20,),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ],
                  );
                }),
          ),
        );
      }
    }
    
    
    class CustomTimerPainter extends CustomPainter {
      CustomTimerPainter({
        required this.animation,
        required this.backgroundColor,
        required this.color,
      }) : super(repaint: animation);
    
      final Animation<double> animation;
      final Color backgroundColor, color;
    
      @override
      void paint(Canvas canvas, Size size) {
        Paint paint = Paint()
          ..color = backgroundColor
          ..strokeWidth = 10.0
          ..strokeCap = StrokeCap.butt
          ..style = PaintingStyle.stroke;
    
        canvas.drawCircle(size.center(Offset.zero), size.width / 2.0, paint);
        paint.color = color;
        double progress = (1.0 - animation.value) * 2 * math.pi;
        canvas.drawArc(Offset.zero & size, math.pi * 1.5, -progress, false, paint);
      }
      @override
      bool shouldRepaint( CustomTimerPainter old) {
        return animation.value != old.animation.value ||
            color != old.color ||
            backgroundColor != old.backgroundColor;
      }
    }

shortbreak.dart

import 'dart:async';
import 'package:braintrinig/animation/StartPomodoro.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:core';
import 'dart:math' as math;
import 'package:flutter_ringtone_player/flutter_ringtone_player.dart';

class ShortBreak extends StatefulWidget {
  const ShortBreak({Key? key}) : super(key: key);

  @override
  State<ShortBreak> createState() => _ShortBreakState ();
}

class _ShortBreakState extends State<ShortBreak>
    with TickerProviderStateMixin {
  List<bool> isSelected = [true, false];
  late Timer timer;
  late AnimationController controller;

  String get countText {
    Duration count = controller.duration! * controller.value;
    return controller.isDismissed
        ? '${controller.duration!.inHours.toString().padLeft(2, '0')}:${(controller.duration!.inMinutes % 60).toString().padLeft(2, '0')}:${(controller.duration!.inSeconds % 60).toString().padLeft(2, '0')}'
        : '${count.inHours.toString().padLeft(2, '0')}:${(count.inMinutes % 60).toString().padLeft(2, '0')}:${(count.inSeconds % 60).toString().padLeft(2, '0')}';
  }

  double progress = 1.0;
  bool LongBreak = true;

  void notify() {
    if (countText == '00:00:00') {
      FlutterRingtonePlayer.playNotification();
    }
  }

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 0),
    );
    controller.addListener(() {
      notify();
      if (controller.isAnimating) {
        setState(() {
          progress = controller.value;
        });
      } else {
        setState(() {
          progress = 1.0;
          LongBreak = true;
        });
      }
    });
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    ThemeData themeData = Theme.of(context);
    return Scaffold(
      backgroundColor: LongBreak? Color(0xff6351c5) : Color(0xffD94530),
      body: GestureDetector(
        onTap: () {
          if (controller.isDismissed) {
            showModalBottomSheet(
              context: context,
              builder: (context) => Container(
                height:300,
                child: CupertinoTimerPicker(
                  initialTimerDuration: controller.duration!,
                  onTimerDurationChanged: (time) {
                    setState(() {
                      controller.duration = time;
                    });
                  },
                ),
              ),
            );
          }
        },

        child: AnimatedBuilder(
            animation: controller,
            builder: (context, child) {
              return Stack(
                children: <Widget>[
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: Container(
                      color: Color(0xff6351c5),
                      height:
                      controller.value * MediaQuery.of(context).size.height * 0.742,
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Expanded(
                          child: Align(
                            alignment: Alignment.bottomCenter,
                            child:
                            Align(
                              alignment: FractionalOffset.bottomCenter,
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.end,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: <Widget>[
                                  Text(
                                    countText,
                                    style: TextStyle(
                                      fontSize: 90.0,
                                      color: Color(0xffF2F2F2),),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            AnimatedBuilder(
                                animation: controller,
                                builder: (context, child) {
                                  return Padding(
                                    padding: EdgeInsets.symmetric(vertical: 2.0, horizontal: 15.0),
                                  );
                                }),
                            AnimatedBuilder(
                                animation: controller,
                                builder: (context, child) {
                                  return Padding(
                                    padding: EdgeInsets.symmetric(vertical: 2.0, horizontal: 15.0),
                                    child: FloatingActionButton.extended(
                                        backgroundColor: Color(0xffF2F2F2),
                                        onPressed:() {
                                          if (controller.isAnimating) {
                                            controller.stop();
                                            setState(() {
                                              LongBreak = false;
                                            });
                                          } else {
                                            controller.reverse(
                                                from: controller.value == 0 ? 1.0 : controller.value);
                                            setState(() {
                                              LongBreak = false;

                                            });
                                          }
                                        },
                                        icon: Icon(
                                          controller.isAnimating ?
                                          Icons.pause : Icons.play_arrow,
                                          color: Color(0xff3B3B3B),),
                                        label: Text(
                                          controller.isAnimating ?  "PAUSE" : "PLAY",
                                          style: TextStyle(color: Color(0xff3B3B3B)),)),
                                  );
                                }),
                            SizedBox(width: 20,),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              );
            }),
      ),
    );
  }
}


class CustomTimerPainter extends CustomPainter {
  CustomTimerPainter({
    required this.animation,
    required this.backgroundColor,
    required this.color,
  }) : super(repaint: animation);

  final Animation<double> animation;
  final Color backgroundColor, color;

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = backgroundColor
      ..strokeWidth = 10.0
      ..strokeCap = StrokeCap.butt
      ..style = PaintingStyle.stroke;

    canvas.drawCircle(size.center(Offset.zero), size.width / 2.0, paint);
    paint.color = color;
    double progress = (1.0 - animation.value) * 2 * math.pi;
    canvas.drawArc(Offset.zero & size, math.pi * 1.5, -progress, false, paint);
  }
  @override
  bool shouldRepaint( CustomTimerPainter old) {
    return animation.value != old.animation.value ||
        color != old.color ||
        backgroundColor != old.backgroundColor;
  }
}

How to be able to navigate to shortbreak.dart without losing the design? I mean the appbar on top and bottom.

I tried this:

void notify() {
    if (countText == '00:00:00') {
      FlutterRingtonePlayer.playNotification();
      Navigator.pushReplacement(context, MaterialPageRoute(builder: (context)=> 
 StartShortBreak()));
});
    }
  }

But, unfortunately, the appbars to the top and bottom don't show up.

How to solve this issue? Thank you in advance

CodePudding user response:

I believe the navigator is navigating inside a nested page. There is a key rootnavigation which can be used. Try this

Navigator.of(context, rootNavigator: true).pushReplacement(MaterialPageRoute (builder: (_)=> StartShortBreak()));

CodePudding user response:

inside ur condition put this when start the timer or what ever u whant to do

Future.delayed(const Duration(milliseconds: 500), () {

Navigator.pop(context);

});

CodePudding user response:

you want to navigate between tab view , not between actual Navigator

first, change your homeui to stateful widget with SigleTickerMixin, instead of using DefaultTabController, make one. :

late TabController _tabController;
  
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

and assign that tabcontroller to tabview and tabbar :

TabBar(
                controller: _tabController,

TabBarView(
            controller: _tabController,

use this

void notify() {
    if (countText == '00:00:00') {
      FlutterRingtonePlayer.playNotification();
//REMOVE THIS NAVIGATOR
      Navigator.pushReplacement(context, MaterialPageRoute(builder: (context)=> 
 StartShortBreak()));
});
//Change to this :
_tabController.animateTo(1, duration: const Duration(milliseconds: 300));
    }
  }

why index is 1, because you put ShortBreak in number 2 on your tabview childreen

  • Related