Flutter开发之——动画-过渡动画Hero

在Flutter中，Hero动画用于实现不同页面间共享部件的过渡效果。以下是一个简单的Hero动画示例：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hero Animation Demo',
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Hero(
          tag: 'hero-tag',
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              onTap: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) => DetailPage()));
              },
              child: Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
            ),
          ),
        ),
      ),
    );
  } }
 
class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Page'),
      ),
      body: Center(
        child: Hero(
          tag: 'hero-tag', // 与之前的Hero的tag相同
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们有一个HomePage和一个DetailPage。在HomePage中，我们有一个可点击的Hero部件，点击它会导航到DetailPage。在DetailPage中，我们有与之前Hero部件相同tag的一个更大的Hero部件，在两个页面间进行过渡时，这个部件会有一个过渡动画。