Flutter - Підручник 002. Створення заставки з переміщенням на головний екран

Dart, Flutter

Після Hello World на Flutter напишіть програму з двома екранами:

• SplashScreen - Екран введення програми
• HomeScreen - програма на головному екрані

Цікаво, що у Flutter є система навігації по вікнах (сторінках) програми. Це чимось схоже на систему роутів в Django (https://evileg.com/ru/knowledge/django/), щоб визначити, який View викликати.

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

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

Я показую лише необхідну частину структури проекту:

• main.dart - файл з основною функцією та запуском MaterialApp
• splash_screen.dart - початкове вікно програми
• home_screen.dart - Вікно домашньої програми

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',),
          ],
        ),
      ),
    );
  }
}

Висновок

В результаті отримуємо наступні два вікна програми.

Заставка

існує 2 секунди

Домашній екран

Перемикається на нього після SplashScreen

Java проти Dart

Звичайно, я вже давно не займаюся розробкою під Android, а тим більше на Java. Напевно все сильно змінилося і можливо, що на краще, але наскільки я пам'ятаю, в Java менше уваги приділялося створенню стану, що іноді викликало деякі проблеми. Тому що цей стан потрібно створювати, зберігати і т.д. Іноді програма падала навіть при повороті екрана. Це приносило дуже великі проблеми та незручності.

У Dart віджети створюються з передачею контексту під час маршрутизації між вікнами. Тобто, як я розумію, стан програми вже не поділено на різні активації, а є більш монолітним. Це може вирішити деякі проблеми, які були в Java, але, безумовно, може викликати інші проблеми, яких не було. Дізнайтеся про це у наступних статтях. Найцікавіше, чим це скінчиться. У результаті зараз планую спробувати написати мобільний додаток для сайту на Flutter/Dart.