Руководство Flutter SplashScreen

SplashScreen là gì?
Библиотека SplashScreen
Example: Time based
Example: Time based + route Map
Example: Time based + pageRoute
Example: Time based + routeName
Example: Future based
Example: Future based + route Map
loaderColor
navigateAfterFuture
seconds
pageRoute
onClick
navigateAfterSeconds
title
backgroundColor
styleTextUnderTheLoader
image
photoSize
loadingText
useLoader
imageBackground
gradientBackground
routeName

1. SplashScreen là gì?

Splash Screen - это первое что видит пользователь на экране при запуске приложения. Это также может быть экран приветствия приложения, который обеспечивает простой начальный опыт при запуске мобильной игры или программы. Splash Screen иногда используется для отображения пользователю состояния приложения, загружаемого в память до того, как оно будет готово к использованию.

Ниже приведены некоторые основные функции Splash Screen:

Он в основном используется для брендинга или идентификации приложения, а также для создания впечатления бренда для пользователей.
Он также используется для отображения хода загрузки приложения в память для представления программного обеспечения пользователю.
Когда загрузка Splash Screen завершается, пользователь получает еще другой функциональный экран, который является домашним экраном или панелью управления (dashboard), а затем забывается. После завершения загрузки мы не можем вернуть Splash Screen путём нажатия кнопки назад.

2. Библиотека SplashScreen

В этой статье я расскажу вам, как использовать библиотеку splashscreen, предоставляемую сообществом. Она недоступна в стандартной библиотеке Flutter, поэтому, если хотите её использовать, вы должны объявить её в проекте.

Откройте файл pubspec.yaml иобъявите библиотеку splashscreen в проекте:

pubspec.yaml

.....

dependencies:
  flutter:
    sdk: flutter
  splashscreen: ^1.3.5

Вы можете найти другие или последние версии библиотеки splashscreen по ссылке, приведенной ниже:

https://pub.dev/packages/splashscreen

Класс SplashScreen предоставляет три constructor:

SplashScreen Constructor

@protected
SplashScreen(

    {Color loaderColor,
    Future navigateAfterFuture,
    int seconds,
    double photoSize,
    Route pageRoute,
    dynamic onClick,
    dynamic navigateAfterSeconds,
    Text title: const Text(''),
    Color backgroundColor: Colors.white,
    TextStyle styleTextUnderTheLoader:
         const TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold, color: Colors.black),
    Image image,
    Text loadingText: const Text(""),
    ImageProvider<Object> imageBackground,
    Gradient gradientBackground,
    bool useLoader: true,
    String routeName}
)

SplashScreen.network Constructor

SplashScreen.network(

    {@required Future navigateAfterFuture,
    Color loaderColor,
    Color backgroundColor,
    double photoSize,
    Text loadingText,
    Image image,
    Route pageRoute,
    dynamic onClick,
    dynamic navigateAfterSeconds,
    Text title,
    TextStyle styleTextUnderTheLoader,
    ImageProvider<Object> imageBackground,
    Gradient gradientBackground,
    bool useLoader,
    String routeName}

)

SplashScreen.timer Constructor

SplashScreen.timer(

    {@required int seconds,
    Color loaderColor,
    Color backgroundColor,
    double photoSize,
    Text loadingText,
    Image image,
    Route pageRoute,
    dynamic onClick,
    dynamic navigateAfterSeconds,
    Text title,
    TextStyle styleTextUnderTheLoader,
    ImageProvider<Object> imageBackground,
    Gradient gradientBackground,
    bool useLoader,
    String routeName}
)

Ниже представлен лэйаут SplashScreen:

3. Example: Time based

Начнем с простого примера, Splash Screen, который отображается в течение определенного времени. Позже он будет заменен главным экраном приложения. Давайте рассмотрим результат этого примера:

Прежде всего, вам нужно создать проект Flutter и объявить библиотеку splashscreen в вашем проекте, как упоминалось выше.

Затем откройте файл main.dart и замените его содержимое следующим кодом:

main.dart (ex1)

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SplashScreenPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
class SplashScreenPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SplashScreen(
      seconds: 5,
      navigateAfterSeconds: new HomeScreen(),
      backgroundColor: Colors.green,
      title: new Text('o7planning.org',textScaleFactor: 2,),
      image: new Image.network(
          'https://s3.o7planning.com/images/triceratops/image1.png'
      ),
      loadingText: Text("Loading"),
      photoSize: 110.0,
      loaderColor: Colors.red,
    );
  }
}
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title:Text("Flutter SplashScreen")
      ),
      body: Center(
          child:Text("Welcome to Home Page",
              style: TextStyle( color: Colors.black, fontSize: 30)
          )
      ),
    );
  }
}

Приведенный выше код показывает, что главный экран приложения изначально генерируется SplashScreenPage, метод build() которого возвращает объект SplashScreen.

Параметр seconds указывает, сколько секунд отображается Splash Screen. По истечению этого времени он будет заменен HomeScreen (заданным параметром navigateAfterSeconds).

4. Example: Time based + route Map

Если ваше приложение использует route Map для навигации по страницам, вы можете разместить перед ней SplashScreen, как показано на рисунке ниже:

В этом случае параметр navigateAfterSeconds имеет тип String. Он назван в честь страницы, на которую вы хотите перейти.

main.dart (ex2)

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: SplashScreenPage(),
      routes: <String, WidgetBuilder>{
        '/home': (BuildContext context) => HomePage(),
        '/details': (BuildContext context) => DetailsPage(),
        '/about': (BuildContext context) => AboutPage(),
      },
    );
  }
}

class SplashScreenPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return SplashScreen(
      title: new Text('Welcome In SplashScreen' ),
      image: new Image.network(
          'https://s3.o7planning.com/images/triceratops/image1.png'
      ),
      backgroundColor: Colors.white,
      photoSize: 100.0,
      loaderColor: Colors.red,
      seconds: 15,
      navigateAfterSeconds: "/home"
    );
  }

}

class HomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Title of Home Page"),
      ),
      body: Center(

          child: Row (
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              ElevatedButton(
                child: Text('Go to Details Page'),
                onPressed: () {
                  Navigator.of(context).pushNamed('/details');
                },
              ),
              ElevatedButton(
                child: Text('Go to About Page'),
                onPressed: () {
                  Navigator.of(context).pushNamed('/about');
                },
              ),
            ],
          )
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Title of Details Page"),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Close'),
          onPressed: () {
            // Close page and pass a value back to previous page
            Navigator.of(context).pop();
          },
        ),
      ),
      backgroundColor: Colors.lightGreen[100],
    );
  }
}

class AboutPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Title of About Page"),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Close'),
          onPressed: () {
            // Close page
            Navigator.of(context).pop();
          },
        ),
      ),
      backgroundColor: Colors.cyan[100],
    );
  }
}

Navigation и Routing в Flutter

5. Example: Time based + pageRoute

В Flutter с помощью Navigator & Route вы можете переходить с одной страницы на другую. Это хорошая идея для вас, чтобы перейти от Splash Screen к главному экрану приложения. Важно, что класс SplashScreen также поддерживает Route. Давайте рассмотрим пример:

main.dart (ex3)

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'o7planning.org',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: SplashScreenPage()
    );
  }
}

class SplashScreenPage extends StatefulWidget {
  @override
  _SplashScreenPageState createState() => _SplashScreenPageState();
}

class _SplashScreenPageState extends State<SplashScreenPage> {

  @override
  Widget build(BuildContext context) {
    return SplashScreen(
        title: new Text('Welcome In SplashScreen'),
        image: new Image.network(
            'https://s3.o7planning.com/images/triceratops/image1.png'
        ),
        backgroundColor: Colors.white,
        photoSize: 100.0,
        loaderColor: Colors.red,
        seconds: 10,
        navigateAfterSeconds: Text("Any Widget"), // Any not null widget.
        pageRoute: _createRoute()
    );
  }

  Route _createRoute() {
    return PageRouteBuilder(
      pageBuilder: (BuildContext context, Animation<double> animation,//
          Animation<double> secondaryAnimation) {
        return HomeScreen();
      },
      transitionsBuilder: (BuildContext context, Animation<double> animation, //
          Animation<double> secondaryAnimation, Widget child) {
        return child;
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title:Text("Flutter SplashScreen")
      ),
      body: Center(
          child:Text("Welcome to Home Page",
              style: TextStyle( color: Colors.black, fontSize: 30)
          )
      ),
      backgroundColor: Colors.green[100],
    );
  }
}

Примечание: в этом примере вам необходимо установить значения для параметров seconds, navigateAfterSeconds и pageRoute.

Параметр pageRoute будет использован, если он не имеет значения null.
Параметр navigateAfterSeconds - это любой Widget, а не null. Даже если он не используется, вы должны установить для него значение.

SplashScreen(
    ...
    seconds: 10,
    navigateAfterSeconds: Text("Any Widget"), // Any not null widget.
    pageRoute: _createRoute()
);

Navigation и Routing в Flutter

6. Example: Time based + routeName

TODO

7. Example: Future based

В некоторых случаях Splash Screen спользуется для указания состояния приложения, загружаемого в память до того, как оно будет готово к использованию. Время отображения Splash Screen зависит от мощности устройства. Как только Splash Screen выполнит свои задачи, он будет заменен главным экраном приложения.

Технически, главный экран будет обернут в объект Future (будущее), который готов заменить Splash Screen при необходимости.

Давайте рассмотрим этот пример:

В этом примере вам нужно установить значение параметра navigateAfterFuturee, а не параметра seconds.

main.dart (ex7)

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'o7planning.org',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: SplashScreenPage()
    );
  }
}

class SplashScreenPage extends StatefulWidget {
  @override
  _SplashScreenPageState createState() => _SplashScreenPageState();
}

class _SplashScreenPageState extends State<SplashScreenPage> {
  int loadingPercent = 0;

  Future<Widget> loadFromFuture() async {
    // <fetch data from server. ex. login>
    while(this.loadingPercent < 100)  {
      this.setState(() {
        this.loadingPercent++;
        print("Percent: " + this.loadingPercent.toString());
      });
      // Delay 100 millisecond.
      await Future.delayed(const Duration(milliseconds : 100));
    }
    // Show Main Screen (After Splash Screen)
    return Future.value(HomeScreen());
  }

  @override
  Widget build(BuildContext context) {
    return SplashScreen(
        navigateAfterFuture: loadFromFuture(),
        title: Text(
          'Welcome In SplashScreen',
          style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 20.0
          ),),
        image: Image.network(
            'https://s3.o7planning.com/images/triceratops/image1.png'
        ),
        backgroundColor: Colors.white,
        styleTextUnderTheLoader: TextStyle(),
        photoSize: 100.0,
        onClick: () => print("Flutter o7planning.org"),
        loadingText: Text("Loading " + this.loadingPercent.toString() +" %"),
        loaderColor: Colors.red
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("Flutter SplashScreen Package"),
          automaticallyImplyLeading: false
      ),
      body: Center(
        child: Text(
          "Welcome To Home Page!",
          style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 30.0
          ),
        ),
      ),
    );
  }
}

8. Example: Future based + route Map

Далее мы перейдем к более сложному примеру. Ваше приложение использует route Map для навигации по страницам, а SplashScreen используется для указания состояния приложения, загружаемого в память до того, как приложение будет готово к использованию.

Давайте рассмотрим пример:

main.dart (ex8)

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: SplashScreenPage(),
      routes: <String, WidgetBuilder>{
        '/home': (BuildContext context) => HomePage(),
        '/details': (BuildContext context) => DetailsPage(),
        '/about': (BuildContext context) => AboutPage(),
      },
    );
  }
}

class SplashScreenPage extends StatefulWidget {
  @override
  _SplashScreenPageState createState() => _SplashScreenPageState();
}

class _SplashScreenPageState extends State<SplashScreenPage> {
  int loadingPercent = 0;

  Future<String> loadFromFuture() async {
    // <fetch data from server. ex. login>
    while(this.loadingPercent < 100)  {
      this.setState(() {
        this.loadingPercent++;
        print("Percent: " + this.loadingPercent.toString());
      });
      // Delay 100 millisecond.
      await Future.delayed(const Duration(milliseconds : 100));
    }
    // Show Main Screen (After Splash Screen)
    return Future.value('/home');
  }

  @override
  Widget build(BuildContext context) {
    return SplashScreen(
        navigateAfterFuture: loadFromFuture(),
        title: Text(
          'Welcome In SplashScreen',
          style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 20.0
          ),),
        image: Image.network(
            'https://s3.o7planning.com/images/triceratops/image1.png'
        ),
        backgroundColor: Colors.white,
        styleTextUnderTheLoader: TextStyle(),
        photoSize: 100.0,
        onClick: () => print("Flutter o7planning.org"),
        loadingText: Text("Loading " + this.loadingPercent.toString() +" %"),
        loaderColor: Colors.red
    );
  }
}

class HomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Title of Home Page"),
      ),
      body: Center(

          child: Row (
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              ElevatedButton(
                child: Text('Go to Details Page'),
                onPressed: () {
                  Navigator.of(context).pushNamed('/details');
                },
              ),
              ElevatedButton(
                child: Text('Go to About Page'),
                onPressed: () {
                  Navigator.of(context).pushNamed('/about');
                },
              ),
            ],
          )
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Title of Details Page"),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Close'),
          onPressed: () {
            // Close page and pass a value back to previous page
            Navigator.of(context).pop();
          },
        ),
      ),
      backgroundColor: Colors.lightGreen[100],
    );
  }
}

class AboutPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Title of About Page"),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Close'),
          onPressed: () {
            // Close page
            Navigator.of(context).pop();
          },
        ),
      ),
      backgroundColor: Colors.cyan[100],
    );
  }
}

9. loaderColor

Свойство loaderColor спользуется для установки цвета loader (CircularProgressIndicator), который отображает ход загрузки приложения.

Color loaderColor

Руководство Flutter CircularProgressIndicator

10. navigateAfterFuture

Future navigateAfterFuture

См. объяснение этого свойства в приведенном выше примере.

11. seconds

Свойство seconds используется для установки количества секунд, в течение которых будет отображаться Splash Screen перед заменой его главным экраном приложения.

int seconds

Если вы устанавливаете значениедля параметра seconds, это означает, что вы выбираете навигацию на основе времени. По истечении этого времени Splash Screen будет заменен главным экраном приложения.

12. pageRoute

Route pageRoute

См. объяснение этого свойства в приведенном выше примере.

13. onClick

dynamic onClick

14. navigateAfterSeconds

dynamic navigateAfterSeconds

См. объяснение этого свойства в приведенном выше примере.

15. title

title - это widget, расположенный под image. В большинстве случаев он используется в качестве объект Text.

Text title: const Text('')

16. backgroundColor

Свойство backgroundColor используется для установки цвета Splash Screen. Его значение по умолчанию - Colors.white.

Color backgroundColor: Colors.white

17. styleTextUnderTheLoader

Свойство styleTextUnderTheLoader больше не используется.

TextStyle styleTextUnderTheLoader:
         const TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold, color: Colors.black)

18. image

Свойство image используется для указания изображения, которое будет отображаться в Splash Screen. Это изображение помещается в CircleAvatar с радиусом photoSize.

Image image

Руководство Flutter Image
Руководство Flutter CircleAvatar

19. photoSize

С точки зрения структуры, imageSplashScreen помещается в CircleAvatar, а photoSize - это значение его радиуса.

double photoSize

Руководство Flutter CircleAvatar

20. loadingText

loadingText - это widget, расположенный в нижней части loader (CircularProgressIndicator), который обычно используется для отображения информации о ходе загрузки приложения.

Text loadingText: const Text("")

21. useLoader

Свойство useLoader используется для отображения (или скрытия) loader (CircularProgressIndicator) на SplashScreen. По умолчанию его значение - true. Это означает, что loader будет отображаться.

bool useLoader: true

22. imageBackground

imageBackground используется для установки цвета фона SplashScreen.

ImageProvider<Object> imageBackground

Руководство Flutter ImageProvider

23. gradientBackground

Gradient gradientBackground

Руководство Flutter Gradient

24. routeName

String routeName

См. объяснение этого свойства в приведенном выше примере.

Руководство Flutter SplashScreen

1. SplashScreen là gì?

2. Библиотека SplashScreen

3. Example: Time based

4. Example: Time based + route Map

5. Example: Time based + pageRoute

6. Example: Time based + routeName

7. Example: Future based

8. Example: Future based + route Map

9. loaderColor

10. navigateAfterFuture

11. seconds

12. pageRoute

13. onClick

14. navigateAfterSeconds

15. title

16. backgroundColor

17. styleTextUnderTheLoader

18. image

19. photoSize

20. loadingText

21. useLoader

22. imageBackground

23. gradientBackground

24. routeName

Pуководства Flutter

Pуководства Flutter

Новейшие статьи