Navigator을 통한 화면 전환과 위젯 필수 매개변수 받기

 

이번에는 Navigator을 이용한 화면전환과, 위젯에서 필수 매개변수를 받는 방법에 대해서 정리해보고자 한다. 

---

 

Navigator을 이용한 화면전환

플러터에서는 Navigator의 push() 메소드를 통해 화면전환이 가능하다. Navigator.push()에 전환할 페이지를 MaterialPageRoute()에 넣어주면 된다. 

 

- main.dart

Navigator.push(context, MaterialPageRoute(builder: (context) => FirstScreen()));

 

 

다음은 화면 전환의 예제이다. 만약에 전환할 페이지에 매개변수를 넘겨야 한다면, 전환할 페이지의 ()안에 매개변수를 적어서 넘겨주면 된다.

 

- main.dart

import 'package:flutter/material.dart';
import 'package:practice/project1/result.dart';

class project1 extends StatefulWidget {
  const project1({super.key});

  @override
  State<project1> createState() => _project1State();
}

class _project1State extends State<project1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("비만도 계산기"),
        ),
        body: Padding(
          // 패딩은 이렇게 줍니다.
          padding: const EdgeInsets.all(8.0),
          child: Form(
            child: Column(
              // 정렬 방향 조정
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                TextFormField(
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: "키",
                   ),
                  //keyboardType으로 키보드를 뭘로 지정할껀지 가능
                  keyboardType: TextInputType.number,
                ),
                // 빈 공간은 SizeBox로 처리한다.
                const SizedBox(height: 8,),
                TextFormField(
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: "몸무게",
                  ),
                  keyboardType: TextInputType.number,
                ),
                const SizedBox(height: 8,),
                ElevatedButton(
                  onPressed: (){
                    Navigator.push(
                      context,
                        MaterialPageRoute(builder: (context) => const Resultscreen(
                            height: 180,
                            weight: 77.5
                        ),)
                    );
                  },
                  child: Text('결과'),
                ),
              ],
            ),
          ),
        )

    );
  }
}

 

 

 

 

 

위젯 필수 매개변수로 받기

만약 위젯에 매개변수를 받아야 한다면, 이를 다음과 같이 작성이 가능하다. 다음은 Stateless 위젯에서 매개변수를 받는 예제인데, height, weight 두 개 변수를 만들고, required을 이용하여 필수로 매개변수를 받도록 조정한다. 

 

- main.dart

import 'package:flutter/material.dart';

class Resultscreen extends StatelessWidget {
  final double height;
  final double weight;

  const Resultscreen({super.key, required this.height, required this.weight});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('결과'),
        ),
        body: const Center(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "정상",
              style: TextStyle(fontSize: 36),
            ),
            Icon(Icons.sentiment_satisfied, color: Colors.green, size: 100),
          ],
        )));
  }
}