The Hero widget doesn't launch the first time (Flutter)

Viewed 232

The animation doesn't work the first time it's launched (onTap in GestureDetector), but it works the next time if I go backwards. And I don't know why. Here is my code :

  • in main.dart :
import 'package:fairlove/screen/splash_screen.dart';
import 'package:flutter/material.dart';

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


class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SplashScreen(),
    );
  }

}

splash_screen and login_screen are under the 'screen' folder.

  • in screen/splash_screen.dart :
import 'package:flutter/material.dart';
import 'login_screen.dart';

class SplashScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Hero(
        tag: 'homeLogo',
        child: GestureDetector(
          onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => LoginScreen(),)),
            child: Image.asset('assets/logo.png')
        ),
      ),
    );
  }
}

when I click on the image the first time, it goes to LoginScreen, ok, but without animation.

  • and in in screen/login_screen.dart :
import 'package:flutter/material.dart';



const users = const {
  'a@a.a': 'aaa',
  'hunter@gmail.com': 'hunter',
};


class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final userNameController = TextEditingController();
    final passwordController = TextEditingController();

    final logo = Hero(
      tag: 'homeLogo', 
      child: CircleAvatar(
        backgroundColor: Colors.transparent,
        radius: 40.0,
        child: Image.asset('assets/logo.png'),
    ));

    final txtUserName = TextField(
      controller: userNameController,
      decoration: InputDecoration(
        hintText: 'Username',
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(30.0))
      ),
    );

    final txtPassword = TextField(
      controller: passwordController,
      obscureText: true,
      decoration: InputDecoration(
        hintText: 'Password',
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(30.0))
      ),
    );

    final btnLogin = RaisedButton(
      color: Colors.deepPurpleAccent,
      textColor: Colors.white,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10.0))),
      onPressed: () {
        if(userNameController != null && userNameController.text == "abc"
        && passwordController!= null && passwordController.text == "123") {
          //Navigator.of(context).pushReplacement(newRoute)
        }
      },
      child: Text('Login', style: TextStyle(fontSize: 20.0),),
    );

    final btnForgetPassword = FlatButton(
      onPressed: () {  },
      child: Text('Forget Password', style: TextStyle(color: Colors.blue),),
    );

    return Scaffold(
      body: Center(
        child: Container(
          width: 400,
          height: 400,
          child: ListView(
            padding: EdgeInsets.only(left: 25.0, right: 25.0),
            children: <Widget>[
              logo,
              SizedBox(height: 20.0),
              txtUserName,
              SizedBox(height: 20.0),
              txtPassword,
              SizedBox(height: 20.0),
              btnLogin,
              btnForgetPassword
            ],
          ),
        ),
      ),
    );
  }

}

If I go back or/and click again the image on the previous screen, Hero animation works.

0 Answers
Related