betacode

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

View more Tutorials:

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 по ссылке, приведенной ниже:
Класс 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],
    );
  }
}

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()
);

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

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
  • TODO Link!
  • TODO Link!

19- photoSize

С точки зрения структуры, image SplashScreen помещается в CircleAvatar, а photoSize - это значение его радиуса.
double photoSize
  • TODO Link!

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
  • TODO Link!

23- gradientBackground

Gradient gradientBackground
  • TODO Link!

24- routeName

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

View more Tutorials: