flutter-4 // 페이지 전환

안녕하세요, 울산 병아리 개발자 입니다.
오늘은 flutter에서 페이지 전환을 하는 방법을 배웠습니다.

3번 째 게시글인데... 최근에 프론트엔드를 하면서 느낀점은 주어진 규칙에 따라 코딩을 하는 느낌이네요.

이때까지 Labview라는 코딩툴을 이용해 바닥부터 코드를 짜왔다면, flutter는 툴사용법이 정해져있어서 따라가는 느낌입니다. 규칙에 따라 집을 짓는 느낌이에요 ㅋㅋㅋ

---

Button(Start Quiz)를 누르면 다른 페이지로 전환 됨

https://evergreenulsan.github.io/flutter-udemy-3-1/

새로 배운 개념

• Stateful Widget setState(() {})
• Lift State Up (initState(), 포인터)

Main Page는 Stateful Widget으로 여러개의 페이지가 전환돼야 합니다.
Stateless Widget 내부에 Button(Start Quiz) 가 있는데, 이 입력을 어떻게 구조적으로 받아줄 수 있을까요?

코드의 흐름을 보면,
-> widget 변수 생성, 이 widget은 여러개의 페이지를 의미
-> 상위 StatefulWidget의 setState의 포인터를 가져옴
-> 포인터를 하위 페이지 StatelessWidget의 Button에 전달
-> Button이 입력되면, 상위 StatefulWidget의 setState 동작

위 코드 흐름을 도식화해서 표현해보면 좋겠는데, 시간이 생기면 해보겠습니다.

---

import 'package:flutter/material.dart';
import 'package:u230820/start_screen.dart';
import 'package:u230820/question_screen.dart';

class Quiz extends StatefulWidget {
  @override
  State<Quiz> createState() => _QuizState();
}

class _QuizState extends State<Quiz> {
  Widget? activeScreen;

  @override
  void initState() {
    activeScreen = StartScreen(switchScreen);
    super.initState();
  }
  
  void switchScreen() {
    setState(() {
      activeScreen = QuestionsScreen();  
    });
  }

  @override
  Widget build(context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Color.fromARGB(255, 73, 13, 176),
                Color.fromARGB(255, 89, 51, 151),
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
          child: activeScreen,
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class StartScreen extends StatelessWidget {
  StartScreen(this.startQuiz, {super.key});

  final void Function() startQuiz;

  @override
  Widget build(context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Image.asset(
            'assets/images/quiz-logo.png',
            width: 300,
            color: Colors.white,
          ),
          SizedBox(
            height: 80,
          ),
          Text(
            'Learn Flutter the fun way!',
            style: TextStyle(
              fontSize: 20,
              color: Colors.white,
            ),
          ),
          SizedBox(
            height: 50,
          ),
          OutlinedButton.icon(
            style: OutlinedButton.styleFrom(
              foregroundColor: Colors.white,
            ),
            onPressed: startQuiz,
            icon: Icon(Icons.arrow_forward_outlined),
            label: Text('Start Quiz'),
          ),
        ],
      ),
    );
  }
}