flutter navigate new screen after animatedcontainer onEnd: - flutter

Question

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?

Answer 1

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