Flutter Getx 路由动画配置

Flutter Getx 对应视频教程访问：https://www.itying.com/goods-1176.html

Flutter Getx 路由动画配置的方法比原生路由更简单

一、defaultTransition可以配置Flutter Getx 路由的默认动画

GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          appBarTheme: const AppBarTheme(
            centerTitle: true,
          )),
      initialRoute: "/",
      defaultTransition: Transition.rightToLeftWithFade,
      getPages: [
       
      ],
    );

二、GetPage 可以配置Flutter Getx 动态路由动画

import 'package:flutter/material.dart';

import 'package:get/get.dart';
import './pages/tabs.dart';
import './pages/shop.dart';
import './pages/user/login.dart';
import './pages/user/registerFirst.dart';
import './pages/user/registerSecond.dart';
import './pages/user/registerThird.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          appBarTheme: const AppBarTheme(
            centerTitle: true,
          )),
      initialRoute: "/",
      defaultTransition: Transition.rightToLeftWithFade,
      getPages: [
        GetPage(name: "/", page: () => const Tabs()),
        GetPage(name: "/login", page: () => const LoginPage()),
        GetPage(
            name: "/registerFirst",
            page: () => const RegisterFirstPage(),
            transition: Transition.rightToLeft),
        GetPage(
            name: "/registerSecond", page: () => const RegisterSecondPage()),
        GetPage(name: "/registerThird", page: () => const RegisterThirdPage()),
        GetPage(name: "/shop", page: () => const ShopPage()),
      ],
    );
  }
}