Flutter/Flutter 기본

[Flutter] 화면 전환, 데이터 전달1 (navigation)

Chafle 2023. 5. 12. 00:54
반응형

HomeScreen->RouteOneScreen으로 데이터 전달

 

데이터를 받을 화면(RouteOneScreen)에서 

number을 외부에서 받을 수 있도록 named 파라미터로 설정

 

class RouteOneScreen extends StatelessWidget {
  final int number;

  const RouteOneScreen({required this.number, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MainLayout(
        title: 'RouteOne',
        children: [
          Text(
            number.toString(),
            textAlign: TextAlign.center,
          ),
          ElevatedButton(
            onPressed: (){
              Navigator.of(context).pop();
            },
            child: Text('Pop')
            ),
        ]
    );
  }
}

 

 


 

 

데이터를 보낼 화면(HomeScreen)에서 

 

Navigator.of(context).push()-MaterialPageRoute(builder: (BuildContext context) => RouteOneScreen(number: 123)

 

 

- 123을 RouteOneScreen으로 전달

 

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

  @override
  Widget build(BuildContext context) {
    return MainLayout(
        title: 'HomeScreen',
        children: [
            ElevatedButton(
              onPressed: (){
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (BuildContext context) => RouteOneScreen(
                    number: 123,
                  ),
                  ),
                );
              },
              child: Text('Push'),
            )
          ],
    );
  }
}

 


 

 RouteOneScreen에서 다시 HomeScreen으로 데이터 전달

 

전환 화면에서 데이터를 받고

받은 데이터를 다시 가공하여(새로운 데이터를 보내든지) 이전 화면에 pop으로 보낼 수 있고

class RouteOneScreen extends StatelessWidget {
  final int number;

  const RouteOneScreen({required this.number, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MainLayout(
        title: 'RouteOne',
        children: [
          Text(
            number.toString(),
            textAlign: TextAlign.center,
          ),
          ElevatedButton(
            onPressed: (){
              Navigator.of(context).pop(456);
            },
            child: Text('Pop')
            ),
        ]
    );
  }
}

 

 


다시 이전화면(HomeScreen)에서는 async로 await해서

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

  @override
  Widget build(BuildContext context) {
    return MainLayout(
        title: 'HomeScreen',
        children: [
            ElevatedButton(
              onPressed: () async {
                final result = await Navigator.of(context).push(
                  MaterialPageRoute(builder: (BuildContext context) => RouteOneScreen(
                    number: 123,
                  ),
                  ),
                );
                print(result);
              },
              child: Text('Push'),
            )
          ],
    );
  }
}

받을 수 있다.

반응형