ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Navigator.pushNamed() 다중 화면 전환
    프로그래밍 공부 메모/flutter 2022. 5. 29. 22:26

    1. initalRoute / routes 속성 값을 꼭 사용 해야함

    2. 웹사이트 주소 체계와 유사함 ( map 값으로 표현)

    [앱 실행후 route 설정 코드]

    import 'package:flutter/material.dart';
    import 'package:flutter_application_2/ScreenB.dart';
    import 'package:flutter_application_2/ScreenC.dart';
    import 'ScreenA.dart';
    
    void main() {
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          initialRoute: '/', //initialRoute ->다중 페이지 이동시 첫번째 페이지가 무엇인지 알려주기 위한 속성값
          routes: {
            // 다중 페이지 이동시 initialRoute, routes 속성을 꼭 사용해야 한다
            // 웹사이트 주소 체계와 유사함
            '/': (context) => ScreenA(), // '/' 웹사이트 접속시 첫번째로 실행되는 index 파일과 같음
            '/b': (context) => ScreenB(),
            '/c': (context) => ScreenC(), 
          },
        );
      }
    }

    [첫 스크린 코드]

    import 'package:flutter/material.dart';
    import 'package:flutter/src/foundation/key.dart';
    import 'package:flutter/src/widgets/framework.dart';
    
    class ScreenA extends StatelessWidget {
      const ScreenA({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('screen A'),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                    onPressed: () {
                      Navigator.pushNamed(context,
                          '/b'); //pushNamed -> 각 페이지 붙여진 이름을 통해 push하여 화면 전환을 한다는 의미
                    },
                    child: Text('Go to Screen B')),
                ElevatedButton(
                    onPressed: () {
                      Navigator.pushNamed(context, '/c');
                    },
                    child: Text('Go to Screen C')),
              ],
            ),
          ),
        );
      }
    }
    반응형
Designed by Tistory.