앱 개발/Flutter 퀴즈

[Flutter 퀴즈] 코딩셰프 - Navigator 문제

내만 2022. 7. 5. 16:25
728x90
반응형

 

 

 

 

🙆‍♂️문제 코드


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(
        child: ElevatedButton(
          child: Text("Go to ScreenA"),
          onPressed: ()=>Navigator.push(context,
          MaterialPageRoute(
            builder: (context) => ScreenA()
          )
          ),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Hi, there!"),
      ),
    );
  }
}

위는 문제의 코드입니다. 버튼을 누르면 ScreenA로 가지는 코드를 작성했지만 가지지 않습니다.

문제를 찾아서 해결해보겠습니다.

 

🙋‍♂️문제 해결


현재 코드에서는 context가 알려주는 경로가 잘못되어 오류가 날 것입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(
        child: ElevatedButton(
            child: Text("Go to ScreenA"),
            onPressed: () {
              Navigator.push(context, MaterialPageRoute(
                  builder: (context) => ScreenA()
              ));
            }
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Hi, there!"),
      ),
    );
  }
}

이처럼 MaterialApp 바로 밑에 코딩하는 것이 아닌 다른 class를 만들어서 MaterialApp 밑에 넣어서 작성을하면

오류없이 작동합니다.

 

 

 

 

 

 

 

 

 

728x90
반응형