Flutter - Урок 002. Создание Splash Screen с переходом на Home Screen

Dart, Flutter

После Hello World на Flutter напишем приложение с двумя экранами:

  • SplashScreen - Входной экран приложения
  • HomeScreen - Домашний экран приложения

Что интересно, во Flutter есть система навигации по окнам (страницам) приложения. Это несколько похоже на систему маршрутов в Django для определения, какие из View вызывать.

Фактически в данном приложении нам нужно будет вызывать MaterialApp виджет, который принимает в себя систему маршрутов routes , которые будут определять, какие окна открывать. Первым окном будет SplashScreen , по прошествии двух секунд он должен будет открыть HomeScreen .

Структура проекта

SplashScreen project structure

Показываю лишь необходимую часть структуры проекта:

  • main.dart - файл с функцией main и запуском MaterialApp
  • splash_screen.dart - начальное окно приложения
  • home_screen.dart - Home окно приложения

main.dart

import 'package:flutter/material.dart';
import 'package:evileg/screens/Splash/splash_screen.dart';
import 'package:evileg/screens/Home/home_screen.dart';

// Запуск приложения
void main() => runApp(MyApp());

// Основной виджет приложения
class MyApp extends StatelessWidget {

  // Формируем маршрутизацию приложения
  final routes = <String, WidgetBuilder>{
    // Путь, по которому создаётся Home Screen
    '/Home': (BuildContext context) => HomeScreen(title: 'EVILEG')
  };

  // Необходимо переопределить метод строительства инстанса виджета
  @override
  Widget build(BuildContext context) {
    // Это будет приложение с поддержкой Material Design
    return MaterialApp(
      title: 'EVILEG',
      // в котором будет Splash Screen с указанием следующего маршрута
      home: SplashScreen(nextRoute: '/Home'),
      // передаём маршруты в приложение
      routes: routes,
    );
  }
}

splash_screen.dart

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

// Наследуемся от виджета с состоянием,
// то есть виджет для изменения состояния которого не требуется пересоздавать его инстанс
class SplashScreen extends StatefulWidget {
  // переменная для хранения маршрута
  final String nextRoute;

  // конструктор, тело конструктора перенесено в область аргументов,
  // то есть сразу аргументы передаются в тело коструктора и устанавливаются внутренним переменным
  // Dart позволяет такое
  SplashScreen({this.nextRoute});

  // все подобные виджеты должны создавать своё состояние,
  // нужно переопределять данный метод
  @override
  State<StatefulWidget> createState() => _SplashScreenState();
}

// Создаём состояние виджета
class _SplashScreenState extends State<SplashScreen> {

  // Инициализация состояния
  @override
  void initState() {
    super.initState();
    // Создаём таймер, который должен будет переключить SplashScreen на HomeScreen через 2 секунды
    Timer(
      Duration(seconds: 2),
      // Для этого используется статический метод навигатора
      // Это очень похоже на передачу лямбда функции в качестве аргумента std::function в C++
      () { Navigator.of(context).pushReplacementNamed(widget.nextRoute); }
    );
  }

  // Формирование виджета
  @override
  Widget build(BuildContext context) {
    // А вот это вёрстка виджета,
    // немного похоже на QML хотя явно не JSON структура
    return Scaffold(
      backgroundColor: Colors.blue,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('EVILEG'),
            Text("Welcome to social network of programmers")
          ],
        ),
      ),
    );
  }

}

home_screen.dart

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

// Такое же виджет, как и SplashScreen, только передаём ему ещё и заголовок
class HomeScreen extends StatefulWidget {
  HomeScreen({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

// Формирование состояния виджета
class _HomeScreenState extends State<HomeScreen> {

  // В отличии от SplashScreen добавляем AppBar
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Home page',),
          ],
        ),
      ),
    );
  }
}

Заключение

А резльтате получаем два следующих окна приложения.

SplashScreen

Существует 2 секунды

SplashScreen

HomeScreen

Переключается на него после SplashScreen

HomeScreen

Java vs Dart

Я, конечно, очень давно не занимался разработкой под Андроид, и тем более разработкой на Java. Наверняка всё очень сильно поменялось и возможно, что в лучшую сторону, но насколько помню, в Java уделялось меньшее внимание созданию состояния, что порой вызывало некоторые проблемы. Поскольку это состояние необходимо было создавать, сохранять и т.д. Иногда приложение падало даже при повороте экрана. Это вызывало очень большие проблемы и неудобства.

В Dart же виджеты создаются с передачей контекста при маршрутизации между окнами. То есть, как я понимаю, состояние приложения уже не разделяется на разные активити, а существует более монолитно. Это может решить некоторые проблемы, которые были в Java, но наверняка может породить и другие проблемы, которых там не было. Об этом узнаем в дальнеших статьях. Самому интересно, чем это кончится. В конце концов на данный момент планирую попробовать написать мобильное приложение для сайта на Flutter/Dart.

Виртуальный хостинг со скидкой 10 процентов
Виртуальный хостинг со скидкой 10 процентов
EVILEG предлагает надёжный хостинг со скидкой 10% на виртуальный хостинг и 5% на VPS
Поддержать автора Donate

Комментарии

Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
G
24 июля 2019 г. 4:20
G0tzef

C++ - Тест 005. Структуры и Классы

  • Результат:66баллов,
  • Очки рейтинга-1
VK
24 июля 2019 г. 3:49
Viktoriia Komarova

C++ - Тест 001. Первая программа и типы данных

  • Результат:40баллов,
  • Очки рейтинга-8
G
24 июля 2019 г. 3:25
G0tzef

C++ - Тест 004. Указатели, Массивы и Циклы

  • Результат:80баллов,
  • Очки рейтинга4
Последние комментарии
23 июля 2019 г. 12:14
IscanderChe

Вот ссылка: https://github.com/iscander-che/TestReportViewer .
23 июля 2019 г. 5:42
Евгений Легоцкой

Хорошо, хотя конечно это С, а не С++ )))) Но если вдруг будут проблемы, то решение через класс со статическими переменными вы видели ))
23 июля 2019 г. 5:33
IscanderChe

"Не потребует каждый раз объявлять extern в других файлах". И так не требует. У меня в тестовом классе эти переменные используются без дополнительного объявления. Так же объявил их в cpp-файле о…
23 июля 2019 г. 5:28
IscanderChe

В репозиторий могу сегодня вечером выложить. "Или ее надо компилить самому под дистриб?" Тут я не совсем понимаю, что вы имеете ввиду. Я выложу в репозиторий исходный код утилиты, и всё.
23 июля 2019 г. 4:32
Евгений Легоцкой

Есть комментарий по вашему коду. Лучше бы вместо глобальных переменных в стиле Си, то есть с использоавнием extern, написали бы статические переменные в рамках класса. IMHO - это будет выглядеть…
Сейчас обсуждают на форуме
24 июля 2019 г. 4:57
Михаиллл

Это не помогает. Ниже мой код Rectangle{ //Flickable { //contentX: 100 id: rectangleForListView y: parent.height * 0.15 height: parent.height * 0.…
24 июля 2019 г. 3:17
Евгений Легоцкой

Ну вот теперь я несколько в ступоре. Запустите из консоли проект и посмотрите тогда, на что ругается. Также, следовало бы посмотреть в настройках самой виртуальной машины, что по поддержке OpenG…
23 июля 2019 г. 8:20
Михаиллл

Так работает QFile f1(dbAdress); f1.setPermissions(QFileDevice::WriteOther);
23 июля 2019 г. 7:11
Pavel K.

Советую использовать нечто такое или такое
22 июля 2019 г. 10:50
Pavel K.

Благодарю.Буду пробовать.
Ищу работу?
5,000.00 руб. - 15,000.00 руб.
Дизайнер
Moskovskiy, Moscow, Russia
25,000.00 руб. - 30,000.00 руб.
Разработчик Qt/C++
Barnaul, Altai Krai, Russia

Для зарегистрированных пользователей на сайте присутствует минимальное количество рекламы

EVILEG
О нас
Услуги
Присоединяйтесь к нам
© EVILEG 2015-2019
Рекомендует хостинг TIMEWEB