美文网首页
flutter 路由和动画

flutter 路由和动画

作者: feitry | 来源:发表于2022-05-24 13:42 被阅读0次
    import 'package:flutter/material.dart';
    
    class HomePage extends StatefulWidget {
      final String title;
      const HomePage({super.key, required this.title});
    
      @override
      State<HomePage> createState() => _HomePageState();
    }
    
    class _HomePageState extends State<HomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              children: [
                Text(widget.title),
                TextButton(
                    onPressed: () {
                      Navigator.of(context).pushNamed('/buttonpage');
                    },
                    child: const Text('go ')),
                TextButton(
                    onPressed: () {
                      Navigator.push(context, MaterialPageRoute(builder: (context) {
                        return const HomePage(title: 'data-go');
                      }));
                    },
                    child: const Text('data-go')),
                TextButton(
                    onPressed: () {
                      Navigator.push(
                          context,
                          PageRouteBuilder(
                            opaque: false,
                            pageBuilder: (context, animation, secondaryAnimation) {
                              return const HomePage(
                                  title: 'more deatil - Navigator');
                            },
                            transitionsBuilder:
                                (context, animation, secondaryAnimation, child) {
                              return FadeTransition(
                                opacity: animation,
                                child: RotationTransition(
                                  turns: Tween<double>(begin: 0.5, end: 1.0)
                                      .animate(animation),
                                  child: child,
                                ),
                              );
                            },
                          ));
                    },
                    child: const Text('more detail - Navigator')),
                // FlatButton(child:const Text('data')),
              ],
            ),
          ),
        );
      }
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'web',
          theme: ThemeData(primarySwatch: Colors.teal),
          home: const HomePage(title: 'title'),
          routes: <String, WidgetBuilder>{
            '/buttonpage': (context) {
              return const HomePage(title: '-button');
            },
            '/routepage': (context) {
              return const HomePage(title: 'samples');
            }
          },
        );
      }
    }
    
    void main(List<String> args) {
      runApp(const MyApp());
    }
    
    

    相关文章

      网友评论

          本文标题:flutter 路由和动画

          本文链接:https://www.haomeiwen.com/subject/aipjprtx.html