flutter navigate new screen after animatedcontainer onEnd:

user_17892513 0
Viewed 78

I'am noob of flutter and i want a create some apps. This is my main screen with animated container.

import 'package:flutter/material.dart';
import "./loginmenu.dart";

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color.fromRGBO(197, 197, 187, 1),
        body: AnimatedContainer(
          duration: Duration(milliseconds: 350),
          width: double.infinity,
          height: double.infinity,
          child: Image(image: AssetImage("assets/images/Babapps-logos.jpeg")),
          onEnd: () => Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => loginscreen()),
          ),
        ),
      ),
    );
  }
}

when animation duration finish i want go new screen.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: <Widget>[
            Container(width: double.infinity, margin: EdgeInsets.all(130)),
            Container(
              width: double.infinity,
              margin: EdgeInsets.all(5),
              child: Center(
                child:
                    Text("Welcome Diet&Life", style: TextStyle(fontSize: 19)),
              ),
            ),
            Container(
              width: 320,
              margin: EdgeInsets.all(5),
              child: Center(
                child: TextField(
                  decoration: InputDecoration(
                      border: OutlineInputBorder(), hintText: "Username"),
                ),
              ),
            ),
            Container(
              width: 320,
              margin: EdgeInsets.all(5),
              child: Center(
                  child: TextField(
                decoration: InputDecoration(
                    border: OutlineInputBorder(), hintText: "Password"),
              )),
            ),
            Container(
              child: Center(
                child: RaisedButton(
                  child: Text("Login"),
                  onPressed: null,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.all(10),
              child: Center(
                child: new InkWell(
                    child: Text("Don't have an account?"), onTap: null),
              ),
            )
          ],
        ),
      ),
    );
  }

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    throw UnimplementedError();
  }
}

but when I run this code, the animation does not go to the other screen even though it expires. Am I on the right track or do I have to work with setstate?

flutter
1 Answers

There is nothing changing on Container, therefor animation onEnd never gets call.

You need to change something inside the container in order to animate it.

If you just like to navigate after some delay, Just use Future.delayed then navigate.

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: StartPage());
  }
}

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

  @override
  State<StartPage> createState() => _StartPageState();
}

class _StartPageState extends State<StartPage> {
  Color containerColor = Colors.cyanAccent;

  @override
  void initState() {
    super.initState();
    _nextPage();
  }

  /// just nevigate
  _nextPage() async {
    Future.delayed(Duration(seconds: 1)).then((value) {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => AnimE(),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            containerColor = Colors.blue;
          });
        },
      ),
      body: AnimatedContainer(
          duration: const Duration(seconds: 2),
          color: containerColor,
          width: double.infinity,
          height: double.infinity,
          child: const Text("a"),
          onEnd: () {
           print("Ebnd"); // paste neviagte by removing init
            //        Navigator.push(
            //   context,
            //   MaterialPageRoute(
            //     builder: (context) => loginscreen(),
            //   ),
            // );
          }),
    );
  }
}
user_101571270
Related