Flutter Boilerplate1 [Router]

MeterialApp 클래스에 navigatorKey 와 onGenerateRoute , builder 속성을 이용하여 뷰 라우터를 만드려고 한다 routes.dart 파일에 AppNavigator 클래스 생성후 navigatorKey 와 onGenerateRoute 콜백 함수를 만들고 앱 실행을 해봤을때 onGeneraterRoute 콜백으로 “/” 가 리턴되었다. 해당 변수를 통해서 그에 맞는 Widget 변수를 리턴하여 화면에 표시하면 된다onGeneraterRoute 함수에서 홈 화면을 리턴해 보자

class _Paths {
  
  static const String home = '/home';
}

class AppNavigator {
  static GlobalKey<NavigatorState> navigatorKey = GlobalKey();

  static Route onGenerateRoute(RouteSettings settings) {
    print("generate Route settings name ${settings.name}");
    switch (settings.name) {
      

      

      case _Paths.home:
      default:
        return FadeRoute(page: HomeScreen());
    }
  }

@override
    Widget build(BuildContext context){
    
      return MaterialApp(
        color : Colors.white,
        navigatorKey: AppNavigator.navigatorKey,
        onGenerateRoute: AppNavigator.onGenerateRoute,
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        title : "UserManager",
        builder: (context, child) {
          print("[UserManagerApp Builder]");
          print("child => ${child}");
          print("context => ${context}");
          if(child == null) return SizedBox.shrink();

          final data = MediaQuery.of(context);
          final smallestSize = min(data.size.width, data.size.height);
          final textScaleFactor = min(smallestSize / const Size(375, 754).width, 1.0);
          return MediaQuery(data: data.copyWith(textScaleFactor: textScaleFactor), child: child);
        },
      );
    }

class _HomeScreenState extends State<HomeScreen> {
    @override
    void initState() {
      super.initState();
    }

    @override
    Widget build(BuildContext context){
      return Scaffold(
          body : Center(
              child : Text('this is home')
          )
      );
    }
}

결과