Evgenij LegotskojJan. 7, 2019, 3:04 a.m.

Flutter - Tutorial 002. Creating a Splash Screen with the rounting to Home Screen

After Hello World on Flutter write an application with two screens:

  • SplashScreen - Application Input Screen
  • HomeScreen - Home screen application

Interestingly, Flutter has a navigation system for the windows (pages) of the application. This is somewhat similar to the route system in Django to determine which View to call.

In fact, in this application, we will need to call the MaterialApp widget, which accepts the routes route system, which will determine which windows to open. The first window will be SplashScreen , after two seconds it will have to open HomeScreen .


Project structure

SplashScreen project structure

I show only the necessary part of the project structure:

  • main.dart - file with the main function and the launch of MaterialApp
  • splash_screen.dart - initial application window
  • home_screen.dart - Home application window

main.dart

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

// Application launch
void main() => runApp(MyApp());

// The main application widget
class MyApp extends StatelessWidget {

  // We form application routing
  final routes = <String, WidgetBuilder>{
    // The path that creates the Home Screen
    '/Home': (BuildContext context) => HomeScreen(title: 'EVILEG')
  };

  // Redefine widget instance construction method
  @override
  Widget build(BuildContext context) {
    // This will be an application with the support of Material Design.
    return MaterialApp(
      title: 'EVILEG',
      // in which there will be a Splash Screen indicating the next route
      home: SplashScreen(nextRoute: '/Home'),
      // passing routes to the application
      routes: routes,
    );
  }
}

splash_screen.dart

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

// Inheriting from the state widget
// that is, a widget for changing the state of which is not required to recreate its instance
class SplashScreen extends StatefulWidget {
  // variable to store the route
  final String nextRoute;

  // the constructor, the constructor body is moved to the argument area,
  // that is, immediately the arguments are passed to the body of the constructor and set by internal variables
  // Dart allows it
  SplashScreen({this.nextRoute});

  // all same widgets should create their own state,
  // need to override this method
  @override
  State<StatefulWidget> createState() => _SplashScreenState();
}

// Create a widget state
class _SplashScreenState extends State<SplashScreen> {

  // State initialization
  @override
  void initState() {
    super.initState();
    // Create a timer to switch SplashScreen to HomeScreen after 2 seconds.
    Timer(
      Duration(seconds: 2),
      // To do this, use the static method of the navigator.
      // This is very similar to passing the lambda function to the std::function argument in C++.
      () { Navigator.of(context).pushReplacementNamed(widget.nextRoute); }
    );
  }

  // Widget creation
  @override
  Widget build(BuildContext context) {
    // And this is the layout of the widget,
    // a bit like QML although obviously not a JSON structure
    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';

// The same widget as SplashScreen, just give it another title
class HomeScreen extends StatefulWidget {
  HomeScreen({Key key, this.title}) : super(key: key);
  final String title;

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

// Creation a widget state
class _HomeScreenState extends State<HomeScreen> {

  // Unlike SplashScreen add 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',),
          ],
        ),
      ),
    );
  }
}

Conclusion

As a result, we get the following two windows of the application.

SplashScreen

It is existing 2 seconds

SplashScreen

HomeScreen

Switches to it after SplashScreen

HomeScreen

Java vs Dart

Of course, I haven’t been engaged in the development for Android for a very long time, and even more so in Java. Surely everything has changed a lot and it is possible that for the better, but as far as I remember, Java paid less attention to creating a state, which sometimes caused some problems. Since this state was necessary to create, save, etc. Sometimes the application fell even when the screen was rotated. This caused very big problems and inconveniences.

In Dart, widgets are created with context passing when routing between windows. That is, as I understand it, the state of the application is no longer divided into different activations, but exists more monolithically. This may solve some of the problems that were in Java, but certainly can cause other problems that were not there. Find out about this in further articles. The most interesting is how it will end. In the end, at the moment I plan to try to write a mobile application for the site on Flutter / Dart.

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.
Support the author Donate
MSh

Не работает, вставил код, поменял пути, но выдает ошибки

Comments

Only authorized users can post comments.
Please, Log in or Sign up
Fornex

Let me recommend you a great European Fornex hosting.

Fornex has proven itself to be a stable host over the years.

For Django projects I recommend VPS hosting

Following the link you will receive a 5% discount on shared hosting services, dedicated servers, VPS and VPN

View Hosting
YL

C++ - Test 001. The first program and data types

  • Result:66points,
  • Rating points-1
k
  • korsar
  • Nov. 23, 2022, 9:57 a.m.

C++ - Test 005. Structures and Classes

  • Result:50points,
  • Rating points-4
TM

C++ - Тест 003. Условия и циклы

  • Result:78points,
  • Rating points2
Last comments
b

GameDev on Qt - Tutorial 5. The explosion of bullets using sprite images

Если вдруг кто-то прочитает.... Скачал проект, скомпилил, запустил. Всё красиво и объектно ориентировано, но вот FPS дико страдает, когда появляется 10+ врагов. Может есть какие-то надстрой…
  • juvf
  • Nov. 25, 2022, 1:14 a.m.

Qt/C++ - Lesson 051. QMediaPlayer – simple audio player

Добрый день. Подскажите, как можно перехватить в Qt или Qml уровень воспроизводимого звука? Т.е. требуется сделать виртуальный винтажный индикатор (стрелочный или светодиодный), который бы …
  • juvf
  • Nov. 3, 2022, 4:20 a.m.

QML - Lesson 007. ListView. Dynamic creation and deletion of elements

Добрый день. Очень полезная статья. Спасибо. Вопрос такой: 1) нужно "взять" кнопку 2 пальцем (прикаснулись пальцем к кнопке 2, держим, через 2-3 кнопка оторвалась от ListView) и пере…

PyQt5 - Lesson 007. Works with QML QtQuick (Signals and slots)

А можно ли из QML сделать привязку свойства к свойству пайтоновского объекта? Ну, т.е. , например, у нашего объекта Calculator обхвялем свойства sumresult и subresult c с декоратором @pyqtProp…
MA

Python Image Recognition with TensorFlow and Keras

А что собственно выводит программа, как вывести то что она смогла распознать?
Now discuss on the forum
AB

Sorting the added QML elements in the ListModel

I am writing an alarm clock in QML, I am required to sort the alarms in ascending order (depending on the date or time (if there are several alarms on the same day). I've done the sorting …
AM

Как добавить в скрипт размер каждого файла в Мб ?

IDLE (Python 3.10 64-bit) Win 10 Есть такой скрипт: Поиск перечня файлов в папке и запись списка: import ospath = 'E:\Мой Python\__Видеокурсы Python'rez = sorted(os.listdir(pa…
n
  • nkly
  • Oct. 18, 2022, 10:14 a.m.

Как сохранить данные древовидной модели на основе QStandardItemModel в файл

Вы меня неправильно поняли. Допустим я собираю кулинарные рецепты и один из них - рецепт супа Харчо. Структура файла данных такова: { node:Рецепт супа Харчо parent:Вкусные блюда, …

Вопрос по Qt Creator

Добрый день. Не знаю, подобную проблему я не решал.

Задать другой класс div-у

Добрый день. Попробуйте использовать Selenium. Это библиотека есть в виде Python модуля и она позволяет загружать страницу и манипулировать html элементами. Как я понимаю, в ней можно…
About
Services
© EVILEG 2015-2022
Recommend hosting TIMEWEB