Flutter - Tutorial 002. Erstellen eines Begrüßungsbildschirms mit der Weiterleitung zum Startbildschirm

Dart, Flutter

Schreiben Sie nach Hello World on Flutter eine Anwendung mit zwei Bildschirmen:

• SplashScreen - Anwendungseingabebildschirm
• HomeScreen - Startbildschirm-App

Interessanterweise verfügt Flutter über ein System zum Navigieren in den Fenstern (Seiten) der Anwendung. Dies ähnelt in gewisser Weise dem Routensystem von Django , um zu bestimmen, welche Ansicht aufgerufen werden soll.

Tatsächlich müssen wir in dieser Anwendung das MaterialApp-Widget aufrufen, das ein Routensystem routes akzeptiert, das bestimmt, welche Fenster geöffnet werden sollen. Das erste Fenster ist SplashScreen , nach zwei Sekunden sollte sich HomeScreen öffnen.

Projektstruktur

Ich zeige nur den notwendigen Teil der Projektstruktur:

• main.dart - eine Datei mit der Hauptfunktion und dem Start von MaterialApp
• splash_screen.dart - das Anfangsfenster der Anwendung
• home_screen.dart - Home-Anwendungsfenster

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

Fazit

Als Ergebnis erhalten wir die folgenden zwei Anwendungsfenster.

Begrüßungsbildschirm

besteht für 2 Sekunden

Startbildschirm

Wechselt nach SplashScreen dorthin

Java gegen Dart

Natürlich entwickle ich schon lange nicht mehr für Android, schon gar nicht für Java. Sicherlich haben sich die Dinge sehr verändert und vielleicht zum Besseren, aber soweit ich mich erinnere, wurde in Java weniger Aufmerksamkeit auf die Erstellung von Zuständen gelegt, was manchmal einige Probleme verursachte. Da dieser Zustand erstellt, gespeichert usw. Manchmal stürzte die App sogar ab, wenn der Bildschirm gedreht wurde. Dies verursachte viele Probleme und Unannehmlichkeiten.

In Dart werden Widgets erstellt, indem beim Routing zwischen Fenstern Kontext übergeben wird. Das heißt, so wie ich es verstehe, ist der Zustand der Anwendung nicht mehr in verschiedene Aktivierungen unterteilt, sondern existiert monolithischer. Dies kann einige Probleme lösen, die in Java vorhanden waren, aber es kann sicherlich andere Probleme verursachen, die nicht vorhanden waren. Erfahren Sie mehr in den folgenden Artikeln. Das Interessanteste ist, wie es enden wird. Aus diesem Grund plane ich im Moment, eine mobile Anwendung für die Website auf Flutter / Dart zu schreiben.