flutter에 스파크 화면을 추가하면...

vuetify로 만든 테스트 관리 도구가 왠지 형식이 됐어요.
나는 줄곧 하고 싶었던 Flutter에 손을 댔다.
Flutter의 생각을 이해하기 위해 나는 매우 고통스럽다.

컨디션

Windows(10)

Flutter(2.10.2)

Dart(2.16.1)

flutter_native_splash(^2.1.2+1)

사전 준비

Flutter 프로젝트를 만들 수 있어야 합니다.

VSCode

Fluter의 확장 기능

AndroidStudio

절차.

1. Fluter 프로젝트 작성

다음 명령을 사용하여 샘플 프로젝트를 제작합니다.

flutter create flutter_splash_sample

다음 명령을 사용하여 부팅 확인

cd flutter_splash_sample
flutter run

이렇게 시료를 가동하면 OK.

2. fluter native splash 설치

flutter native splash를 사용하여 제작해야 하므로 우선 포장을 설치해야 합니다.
배달부에서 보듯이 다음 명령을 실행하여 포장의 최신 버전을 가져옵니다.
flutter_native_splash

flutter pub add flutter_native_splash

잡담, flutter pub add 명령과 pubspec.yaml에 기재된 flutter pub get 중 어느 것이 좋을까요?
해본 적은 없지만 pubspec.yaml에 쓰면 버전을 지정할 수 있을 것 같아서 최신 버전을 제외하고 사용하면yaml에 기재된 것 같아요.이렇게 막 설명하는 오늘 이맘때

3. splash를 통해 표시된 내용을 기재

이번에는 배경색만 바꾼다.

flutter_native_splash:
  color: "0021FF"
  # image: "assets/images/splash.png"
  # ↑画像表示させるときは任意のフォルダに画像を格納してパスを記載する

yaml변경후flutter pub get변경내용을 반영한다.

4.splash 제작

(이 단계를 벗어던지고 스플래시가 나오지 않는 것을 감탄하는...과거의 자신에게 준다.)
다음 명령을 실행하여 splash를 만듭니다.

flutter pub run flutter_native_splash:create

이런 다람쥐 원숭이가 나타나면 성공이다.

～中略～
╔════════════════════════════════════════════════════════════════════════════╗
║                                 WHAT IS NEW:                               ║
╠════════════════════════════════════════════════════════════════════════════╣
║ You can now keep the splash screen up while your app initializes!          ║
║ No need for a secondary splash screen anymore. Just use the remove()       ║
║ method to remove the splash screen after your initialization is complete.  ║
║ Check the docs for more info.                                              ║
╚════════════════════════════════════════════════════════════════════════════╝

Native splash complete. 👍
Now go finish building something awesome! 💪 You rock! 🤘🤩

에서 상자의 언어에 따라 마지막 절차를 진행한다.

5.main 파일 편집

void main()에 기재된 서류에 보충하다.
그렇게 하면 main.dart된다.
추가된 곳에'★'이라고 쓰세요.
main.dart

import 'package:flutter/material.dart';
import 'package:flutter_native_splash/flutter_native_splash.dart'; // ★

void main() {
  // Start★
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  // End★
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  // Start★
  @override
  void initState() {
    super.initState();
    initialization();
  }

  void initialization() async {
    print('ready in 3...');
    await Future.delayed(const Duration(seconds: 1));
    print('ready in 2...');
    await Future.delayed(const Duration(seconds: 1));
    print('ready in 1...');
    await Future.delayed(const Duration(seconds: 1));
    print('go!');
    FlutterNativeSplash.remove();
  }
  // End★
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

etc.

스파크를 업데이트할 때는 3단계 및 4단계를 따릅니다.

후기

안드로이드/iOS를 따로 제작할 필요가 없는 것이 좋다.
전에 말했지만 생각은 이해하기 힘들지만 냉정하게 대면하면 익숙해지겠죠(웃음)
그리고 베일을 하면서 개발을 가속화할 수 있는 포장이 풍부해지는 게 큰 도움이 된다고 생각했어요.

참고 문장

flutter_native_splash

Github

flutter_splash_sample