[flutter] 앱 로딩 페이지 만들기, 스플래시 스크린

ㅁ 들어가며

ㅇ  코드팩토리의 플러터 프로그래밍 책을 보며 실습한 내용이다.

ㅇ 스프레드 스크린 앱을 만드는 과정을 정리하였다.

ㅇ 소스는 이곳

 

ㅁ SplashScreen 프로젝트 생성

 

ㅁ Slash Screen 중앙텍스트 구현

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

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Slash Screen'),
        ),
      ),
    );
  }
}

 

 

ㅁ Container와 BoxDecoration 사용방법

// Container와 BoxDecoration 사용방법
class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
          child: Center(
            child: Text('Splash Screen'),
          ),
        )
      ),
    );
  }
}

 

 

ㅁ 이미지 출력하기 - asset

 ㅇ 프로젝트 폴더 위에서 마우스 오른쪽 클릭하여 assets 디렉토리 생성

 ㅇ 파일 Drag&Drop으로 파일 복사

 ㅇ pubspec.yaml에 프로젝트에 추가하고 싶은 폴더를 추가.

 

$ flutter pub get
Resolving dependencies...
  flutter_lints 2.0.3 (3.0.1 available)
  lints 2.1.1 (3.0.0 available)
  matcher 0.12.16 (0.12.16+1 available)
  material_color_utilities 0.5.0 (0.8.0 available)
  meta 1.10.0 (1.12.0 available)
  path 1.8.3 (1.9.0 available)
  test_api 0.6.1 (0.7.0 available)
  web 0.3.0 (0.5.0 available)
Got dependencies!
8 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.
Process finished with exit code 0

 ㅇ 티머널에서 flutter pub get을 실행한다.

 

 ㅇ 혹은 파일을 수정하면 자동으로 표시되는 Put get을 클릭할 수도 있다. 

 ㅇ 반영을 위해서는 앱을 재기동해야한다.

 

// image 추가 방법
class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            color: Colors.white,
          ),
          child: Center(
            child: Image.asset('assets/main_intro.png'),
          ),
        )
      ),
    );
  }
}

 ㅇ 반영된 이미지를 확인할 수 있다.

 

ㅁ 함께 보면 좋은 사이트

ㅇㅇ flutter cookbook - Build a Flutter layout

  ㄴ 플루터 쿡북 중 레이아웃 페이지 링크

ㅇ codelabs- 첫 번째 Flutter 앱

  ㄴ 환경을 잡고 테스트를 해보기 좋은 튜토리얼

ㅇ docs.flutter.dev

  - Adding a splash screen to your Android app

  - Adding assets and images