Flutter - Сабақ 002. Негізгі экранға көшу арқылы Splash Screen құру

Dart, Flutter

Flutter-тегі Hello World бағдарламасынан кейін екі экраны бар қосымшаны жазыңыз:

• SplashScreen - қолданбаны енгізу экраны
• HomeScreen - негізгі экран қолданбасы

Бір қызығы, Flutter қолданбасының терезелерін (беттерін) шарлау жүйесі бар. Бұл қай Көрініске қоңырау шалу керектігін анықтау үшін Django маршруттар жүйесіне біршама ұқсас.

Шын мәнінде, бұл қолданбада бізге қандай терезелерді ашу керектігін анықтайтын бағдарлар бағдар жүйесін қабылдайтын MaterialApp виджетін шақыру керек болады. Бірінші терезе SplashScreen болады, екі секундтан кейін HomeScreen ашылады.

Жоба құрылымы

Мен жоба құрылымының қажетті бөлігін ғана көрсетемін:

• main.dart - негізгі функциясы және MaterialApp іске қосылуы бар файл
• splash_screen.dart – қолданбаның бастапқы терезесі
• home_screen.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")
          ],
        ),
      ),
    );
  }

}

негізгі_экран.дарт

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

Қорытынды

Нәтижесінде біз келесі екі қолданба терезесін аламыз.

SplashScreen

2 секунд бар

Басты экран

Оған SplashScreen кейін ауысады

Java және Dart

Әрине, мен Android үшін өте ұзақ уақыт бойы әзірлемедім, одан да көп Java. Әрине, бәрі көп өзгерді, мүмкін жақсырақ, бірақ менің есімде, Java күйді құруға азырақ назар аударды, бұл кейде кейбір қиындықтар туғызды. Бұл күйді құру, сақтау және т.б. Кейде қолданба экранды айналдырған кезде де істен шығады. Бұл көптеген қиындықтар мен қолайсыздықтар туғызды.

Dart бағдарламасында виджеттер терезелер арасында бағыттау кезінде мәтінмәнді беру арқылы жасалады. Яғни, менің түсінуімше, қосымшаның күйі енді әртүрлі белсендірулерге бөлінбейді, бірақ монолитті түрде бар. Бұл Java-да болған кейбір мәселелерді шешуі мүмкін, бірақ ол жерде жоқ басқа мәселелерді тудыруы мүмкін. Келесі мақалалардан көбірек біліңіз. Ең қызығы оның қалай аяқталатыны. Нәтижесінде, қазіргі уақытта мен Flutter / Dart сайтындағы мобильді қосымшаны жазуды жоспарлап отырмын.