flutter에서 Named route 화면 전환을 이용하여 첫(시작) 로딩 화면( Splash Screen ) 만들기

Named route 화면 전환

https://flutter-ko.dev/docs/cookbook/navigation/named-routes

Named route로의 화면 전환

 

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Named routes Demo',
    // "/"을 앱이 시작하게 될 route로 지정합니다. 본 예제에서는 FirstScreen 위젯이 첫 번째 페이지가
    // 될 것입니다.
    initialRoute: '/',
    routes: {
      // When we navigate to the "/" route, build the FirstScreen Widget
      // "/" Route로 이동하면, FirstScreen 위젯을 생성합니다.
      '/': (context) => FirstScreen(),
      // "/second" route로 이동하면, SecondScreen 위젯을 생성합니다.
      '/second': (context) => SecondScreen(),
    },
  ));
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Launch screen'),
          onPressed: () {
            // Named route를 사용하여 두 번째 화면으로 전환합니다.
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            // 현재 route를 스택에서 제거함으로써 첫 번째 스크린으로 되돌아 갑니다.
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

 

위 코드는 flutter에서 제공하는 샘플 소스로 dartpad에서 실행해 보면 결과를 알수 있습니다.

dartpad 버전이 3.3.0 버전 이상에서는 RaisedButton에서 에러가 발생할 수 있습니다. 아래 URL에서 처럼 수정해서 해결할 수 있습니다.

https://direction-to-money.tistory.com/entry/flutter-material-button-The-method-FlatButton-isnt-defined

flutter material button - The method 'FlatButton' isn't defined

 

위 코드를 간략하면 설명하면 다음과 같습니다.

1. 두 개의 화면 만들기.
   FristScreen, SecondScreen
2. Route 정의하기
   '/', '/second'
3. Navigator.pushNamed를 사용하여 두 번째 화면으로 전환하기.
4. Navigator.pop을 사용하여 첫 번째 화면으로 돌아가기.

 

Splash Screen

위 코드에 SplashScreen을 추가하겠습니다. 동작은 앱 시작 시 5초 동안 SplashScreen 화면을 보여 주고 자동으로 FirstScreen으로 넘어가는 샢플 소스 입니다.

 

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

void main() {
  runApp(MaterialApp(
    title: 'Named routes Demo',
    // "/"을 앱이 시작하게 될 route로 지정합니다. 본 예제에서는 FirstScreen 위젯이 첫 번째 페이지가
    // 될 것입니다.
    initialRoute: 'splash',
    routes: {
      'splash': (context) => SplashScreen(),
      // When we navigate to the "/" route, build the FirstScreen Widget
      // "/" Route로 이동하면, FirstScreen 위젯을 생성합니다.
      '/': (context) => FirstScreen(),
      // "/second" route로 이동하면, SecondScreen 위젯을 생성합니다.
      '/second': (context) => SecondScreen(),
    },
  ));
}

class SplashScreen extends StatefulWidget {
  @override
  SplashScreenState createState() => new SplashScreenState();
}

class SplashScreenState extends State<SplashScreen> {
  startTime() async {
    var _duration = new Duration(seconds: 5);
    return new Timer(_duration, navigationPage);
  }
  
  void navigationPage() {
    Navigator.of(context).pushReplacementNamed('/');
  }
  
  @override
  void initState() {
    startTime();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Splash Screen'),),
      );
    }
} 

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Launch screen'),
          onPressed: () {
            // Named route를 사용하여 두 번째 화면으로 전환합니다.
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 현재 route를 스택에서 제거함으로써 첫 번째 스크린으로 되돌아 갑니다.
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

 

위 코드를 간략하면 설명하면 다음과 같습니다.

1. routes에 'splash' 추가
2. SplashScreen 추가
3. SplashScreen에 initState 추가
   - SplashScreen 시작 시 initState가 동작함
   - initState에서 timer가 동작하는 startTime 호출
4. SplashScreen 내 timer 추가
   5초 후 navigationPage() 실행
5. navigationPage() 추가
   Navigator.of(context).pushReplacementNamed('/')로 FirstScreen으로 자동 이동