Flutter 案例学习之：使用基本的 Hero 动画创建简单的

GitHub：https://github.com/happy-python/flutter_demos/tree/master/login_ui

登录页 欢迎页

在主配置文件 pubspec.yaml 中配置字体和静态图片：

assets:
   - logo.png
   - alucard.jpg

fonts:
    - family: Nunito
      fonts:
        - asset: assets/Nunito.ttf

lib/main.dart
路由的定义及字体的使用

import 'package:flutter/material.dart';
import 'home_page.dart';
import 'login_page.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  final Map<String, WidgetBuilder> routes = {
    "/": (BuildContext context) => LoginPage(),
    "/home": (BuildContext context) => HomePage(),
  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.lightBlue,
        fontFamily: 'Nunito',
      ),
      debugShowCheckedModeBanner: false,
      routes: routes,
      initialRoute: '/',
    );
  }
}

lib/login_page.dart
登录页面

import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget logoSection() {
      // Hero 动画
      return Hero(
        tag: 'hero',
        child: CircleAvatar(
          // 背景透明
          backgroundColor: Colors.transparent,
          // 半径
          radius: 48.0,
          child: Image.asset(
            "logo.png",
          ),
        ),
      );
    }

    Widget inputSection() {
      return Column(
        children: <Widget>[
          TextFormField(
            decoration: InputDecoration(
              // 提示文本
              hintText: "Email",
              contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(32.0),
              ),
            ),
            keyboardType: TextInputType.emailAddress,
          ),
          SizedBox(
            height: 8.0,
          ),
          TextFormField(
            decoration: InputDecoration(
              hintText: "Password",
              contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(32.0),
              ),
            ),
            // 隐藏文本
            obscureText: true,
          ),
        ],
      );
    }

    Widget loginSection() {
      return FlatButton(
        padding: EdgeInsets.all(0.0),
        onPressed: () {
          Navigator.pushNamed(context, '/home');
        },
        child: Container(
          height: 52.0,
          width: MediaQuery.of(context).size.width,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: Colors.lightBlue,
            borderRadius: new BorderRadius.circular(30.0),
          ),
          child: Text(
            "Login",
            style: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
      );
    }

    Widget labelSection() {
      return FlatButton(
        child: Text(
          "Forgot password?",
          style: TextStyle(
            color: Colors.black54,
          ),
        ),
        onPressed: () {},
      );
    }

    return Scaffold(
      body: Center(
        child: Padding(
          padding: EdgeInsets.fromLTRB(24.0, 0.0, 24.0, 0.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              logoSection(),
              SizedBox(
                height: 48.0,
              ),
              inputSection(),
              SizedBox(
                height: 24.0,
              ),
              loginSection(),
              labelSection(),
            ],
          ),
        ),
      ),
    );
  }
}

lib/home_page.dart
欢迎页面

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  Widget avatarSection() {
    // Hero 动画
    return Hero(
      tag: 'hero',
      child: Padding(
        padding: EdgeInsets.all(16.0),
        child: CircleAvatar(
          // 背景透明
          backgroundColor: Colors.transparent,
          // 半径
          radius: 72.0,
          backgroundImage: AssetImage(
            "alucard.jpg",
          ),
        ),
      ),
    );
  }

  Widget welcomeSection() {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: Text(
        'Welcome Alucard',
        style: TextStyle(
          fontSize: 28.0,
          color: Colors.white,
        ),
      ),
    );
  }

  Widget loremSection() {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: Text(
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit condimentum mauris id tempor. Praesent eu commodo lacus. Praesent eget mi sed libero eleifend tempor. Sed at fringilla ipsum. Duis malesuada feugiat urna vitae convallis. Aliquam eu libero arcu.',
        style: TextStyle(
          fontSize: 16.0,
          color: Colors.white,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        // 获取设备宽度
        width: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(
          // 渐变色
          gradient: LinearGradient(colors: [
            Colors.blue,
            Colors.lightBlueAccent,
          ]),
        ),
        padding: EdgeInsets.all(28.0),
        child: Column(
          children: <Widget>[
            avatarSection(),
            welcomeSection(),
            loremSection(),
          ],
        ),
      ),
    );
  }
}