소개

이 기사는 Flutter 초보자를위한 것입니다.
이번에는 화면 천이를 구현할 때까지를 설명합니다.
구현 방법으로 버튼을 누르면 화면 천이하는 방법으로 구현합니다.

1. 준비

안드로이드 스튜디오를 열고 flatter의 새로운 프로젝트를 시작하십시오. 그러면 기본적으로 열리는 "main.dart"에 코드가 쓰여 있다고 생각합니다. 일단 이 상태에서 빌드해 보면 아래 스크린샷의 화면이 나오고 버튼을 누른 횟수 카운트되어 간다는 프로그램이 되어 있습니다.

모처럼 여기에서 여러가지 코드가 쓰여져 있기 때문에 이용합니다만, 메세지나 버튼을 눌러 가산하는 프로그램은 불필요하므로 삭제합니다. 또, 코멘트문도 많이 있습니다만 알기 어렵기 때문에 삭제합시다.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
      ),
    );
  }
}

코멘트문이 사라져 보기 쉬워졌어요. 이렇게 하면 방금전의 버튼이나 수치, 메시지가 사라져 심플한 외형의 앱이 됩니다.

2. 새로운 화면 추가

여기 정말 가볍게 flutter의 파일 구성에 대해 언급합니다. 아래 이미지와 같이 프로젝트를 만들면 "lib"라는 폴더 안에 "mein.dart"가 들어 있습니다. 기본적으로 어플리케이션의 화면은 이 「lib」라고 하는 폴더 안에 넣어 두면 기억해 두면 괜찮습니다.

그렇다면이 폴더에 새로운 dart 파일을 추가합시다. lib를 마우스 오른쪽 버튼으로 클릭> New> Dart File을 선택하고 이름을 지정하면 추가됩니다. 우선 나는 "next.dart"라고 했다.
새로운 파일이 생겼습니다만, 아무것도 쓰여 있지 않기 때문에 필요 최소한의 프로그램을 써 갑니다.

next.dart

class Next extends StatelessWidget{
}

이렇게 쓰면 마음대로 import문이 쓰여져 다음과 같이 됩니다.

next.dart

import 'package:flutter/cupertino.dart';

class Next extends StatelessWidget{
}

그러면 클래스 이름에 빨간색 물결이 그려집니다. 클래스명에 커서를 맞추어 출현한 빨간색! 마크를 누르고 맨 위에 있는 "Cleate 1 missing ~"을 선택하면 자동으로 코드가 입력됩니다.


이 코드를 이용해 아래와 같이 코드를 쓰는 것으로 우선 천이처의 완성입니다.

next.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Next extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text('2画面目'),
      ),
      body: Center(

      ),
    );
  }
}

3. 화면 천이 구현

그러면 드디어 'main.dart'에서 'next.dart'로 화면 전환을 위한 프로그램을 작성합니다.
이번 화면 천이의 구현 방법으로서 버튼을 준비하고, 누르면 화면을 천이합니다.
「main.dart」의 「_MyHomePageState」클래스안의body안에 프로그램을 써 갑니다. 또한 이 편집과 함께 헤더의 문자를 변경했습니다.

main.dart

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('1画面目'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('次へ'),
          onPressed: (){
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => Next(),
              ),
            );
          }
        ),
      ),
    );
  }
}

여기의 RaisedButton에 의해 버튼이 만들어집니다.
onPreased에 의해 눌려졌을 때의 처리를 쓰기 위해서, 여기서 천이처의 클래스명을 쓰게 됩니다.

여기서 다시 Run하자.

무사히 문제없이 화면 전환이 구현되었습니다.
화면 전환 프로그램을 작성하면 전환 대상 화면의 헤더에 자동으로 이전 화면으로 돌아가기 버튼을 사용할 수 있습니다.

마지막으로 화면 전환 대상으로 돌아가기 버튼을 만들어 봅시다.

next.dart

class Next extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text('2画面目'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('戻る'),
          onPressed: (){
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

방금 전의 「main.dart」에 화면 천이 버튼을 실장했을 때와 비슷하네요.
그러나 여기에서는 전환 된 화면으로 돌아가는 프로그램을 작성하고 있으므로 전환 대상의 클래스 이름을 지정할 필요가 없습니다.
이것으로 하나의 화면 전환 구현이 완료됩니다.