[Flutter] 초기화가 끝나기 전에 스파크 화면을 보여주고 싶어요[fluter native splash]

개시하다

나는 프로그램을 시작할 때 다양한 초기화를 진행할 것이라고 생각한다.만약에 사용자 인증이 있다면 사용자가 로그인했는지 알기 전에 데이터베이스에서 사용자의 정보를 읽거나 초기화를 몇 초 동안 기다리게 할 수도 있다.
사용자가 기다리는 동안 스파크 화면을 표시하는 것은 좋은 방법이다.하지만 flutter_native_splash를 사용해 스파크 화면을 설치했지만 초기화 처리가 끝나기 전에 스파크 화면이 꺼져 곤란하지 않았나.
https://pub.dev/packages/flutter_native_splash
초기화 처리가 끝날 때까지 스파크 화면을 지속적으로 표시하는 방법을 소개한다.
만약 아직 스파크 화면을 설치하지 않은 사람이 있다면 반드시 다음 글을 읽고 스파크 화면을 설치한 후에 본 보도로 돌아가십시오.
https://zenn.dev/susatthi/articles/20220406-061305-flutter-native-splash

결론

초기화의 시작과 끝은 아래 코드만 추가하면 됩니다.

+import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
+  final widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
+  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
}

// 初期化が終了したら次のコードを呼び出す
+FlutterNativeSplash.remove();

아래에서 상세한 설명을 시작하겠습니다.

컨디션

Flutter 2.10.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision c860cba910 (2 weeks ago) • 2022-03-25 00:23:12 -0500
Engine • revision 57d3bac3dd
Tools • Dart 2.16.2 • DevTools 2.9.2

전제 조건

설명을 위해 평소 스코어 소프트웨어에 다음과 같은 기능을 추가했다.

스파크 설치 화면

어플리케이션이 시작될 때 서버에서 카운트 초기값(10)을 읽고 표시합니다.

진짜 서버에서 읽으면 코드가 길어지기 때문에 샘플은 2초간 자야 한다.

읽는 동안 진행 상태가 표시됩니다.

그래서 스파크 화면이 꺼진 후에 진도를 표시합니다.

코드는 다음과 같습니다.

import 'package:flutter/material.dart';

void main() {
  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;
+  bool _isLoading = true;

+  @override
+  void initState() {
+    super.initState();
+    Future(() async {
+      await Future<void>.delayed(const Duration(seconds: 2));
+      setState(() {
+        _counter = 10;
+        _isLoading = false;
+      });
+    });
+  }

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
-      body: Center(
+      body: Stack(
+        children: [
+          Visibility(
+            visible: !_isLoading,
+            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text(
                    'You have pushed the button this many times:',
                  ),
                  Text(
                    '$_counter',
                    style: Theme.of(context).textTheme.headline4,
                  ),
                ],
              ),
            ),
+          ),
+          Visibility(
+            visible: _isLoading,
+            child: Center(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: const [
+                  CircularProgressIndicator(),
+                ],
+              ),
+            ),
+          )
+        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

수정 방법

초기화가 끝나기 전에 스파크 화면을 수정해 보세요.
flutter_native_splash 방법을 부르고 싶으므로 아래 방법에 따라 수정pubspec.yaml합니다.
pubspec.yaml

dependencies:
+  flutter_native_splash: ^2.1.3+1

dev_dependencies:
-  flutter_native_splash: ^2.1.3+1

runApp() 전에 다음 코드를 추가합니다.

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

void main() {
+  final widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
+  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
}

마지막으로 초기화 처리가 끝난 시간에 다음 코드를 추가합니다.

  @override
  void initState() {
    super.initState();
    Future(() async {
      await Future<void>.delayed(const Duration(seconds: 2));
      setState(() {
+        FlutterNativeSplash.remove();
        _counter = 10;
        _isLoading = false;
      });
    });
  }

수정이 완료되었습니다.실제 동작을 보세요.

진행 상황을 표시하지 않고 초기화 처리가 끝날 때까지 스파크 화면을 표시할 수 있습니다.꼭 참고해주세요!

최후

나는 Fluter대학이라는 Flutter 엔지니어에 전문적으로 종사하는 학습 단체에 속한다.관심 있는 사람은 이 페이지부터 참가할 수 있다.
https://flutteruniv.com/

같이 읽고 싶어요.

https://zenn.dev/susatthi/articles/20220406-061305-flutter-native-splash