Write a simple page with Flutter

* * * * * * * * * * * * * * * * *

preface

This article is intended for beginners interested in Flutter. I will lead you to write a simple page to give you a simple understanding of Flutter.

Introduction to Flutter

Flutter is Google’s UI toolkit that uses a code base to build beautiful native-compiled applications for mobile, Web and desktop.

Flutter implements a self-drawing engine, using its own layout, drawing system and interface.

1. Structure diagram of the Flutter framework

A brief description of the Flutter frame diagram:

• The Framework layer uses Dart, the Material layer contains Android-style Widgets, the Cupertino layer contains ios-style Widgets, and the Widgets layer contains Widgets. The Rendering layer contains libraries that control Rendering; The Animation layer contains the library for Animation; The Painting layer contains the library for controlling the Painting; The Gestures layer contains a library of Gestures; The Foundation layer contains the base libraries (such as the apis for determining platform ownership (Android, iOS, etc.), as well as the apis for print and debug).

• Engine layer uses C++ implementation, Skia layer is open source two-dimensional graphics library. The Dart layer contains the Dart API, and the Text layer contains the Text rendering display API.

The content we see in Flutter is controlled by the Widget, and the interaction we see in Flutter is controlled by the Widget. Everything in Flutter is a Widget.

In this article, I will introduce the StatelessWidget, StatefulWidget, Text, Image, FlatButton, GestureDetector, ListView, etc.

2. Related widgets are described as follows:

• StatelessWidget is a StatelessWidget that can be used when the Widget you want to display does not need to change its display content.

• A StatefulWidget is a StatefulWidget that needs to be used when the Widget you want to display needs to change its display content. A subclass of StatefulWidget holds the configuration information for State. The State controls the display of the StatefulWidget’s interface. When the interface data corresponding to the StatefulWidget changes, the setState() method is called and the system runs buildContext() to update the interface.

• Column is used to show the widgets in a Column;

• Container is a Container Widget;

• Text is used to display Text, equivalent to UILabel in iOS.

• Image is used to show pictures;

• FlatButton is equivalent to UIButton in iOS, which is used to process interactive events. Meanwhile, A GestureDetector can be used to wrap widgets in Flutter to achieve interactive effects.

• A ListView is the equivalent of a UITableView in iOS that displays the contents of a list.

• ListTile is the equivalent of UITableViewCell in iOS.

Create a simple page using Flutter

1. Hello World is displayed

The Text Widget is required to display Hello World

The function code is as follows:

Text('Hello World'),
Copy the code

2. Create a Flutter application

• The tool I used was Visual Studio Code

• Open Visual Studio Code, command + Shift + P, then select Create Flutter New Project and enter the Project name in lowercase letters.

• The code to display Hello World is as follows:

The author has added some notes according to his own understanding.

// Application execution entry
void main(List<String> args) {
  // Initialize the specified Widget and draw the Widget rendering effect to the screen
  runApp(MaterialApp(
    title: 'Android Task name when switching task Management',
    home: QiStatelessApp(),
  ));
}
Copy the code

// Create an inherited Stateless Widget
class QiStatelessApp extends StatelessWidget {
  // Override the build method, which returns the Widget type and the on-screen content.
  @override
  Widget build(BuildContext context) {
    // MaterialApp control interface style is Android style
    // The CupertinoApp interface is iOS style
    return MaterialApp(
      title: 'Android Task name when switching task Management'.// debugShowCheckedModeBanner: false,
      // Scaffold: scaffolding is used to display basic framework structures such as appBar, body, bottomNavigationBar
      home: Scaffold(
        // AppBar: the iOS equivalent of navigation bar
        appBar: AppBar(
          // Display content on AppBar
          // Text displays Text content, equivalent to UILabel in iOS
          title: Text('App Bar Display Content '),),// Body: the content displayed between AppBar and BottomNavigationBar
        // Center is used to Center child widgets
        body: Center(
          child: Text('Hello World'),),// Equivalent to UITabBar in iOS
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.work), title: Text('work')),
            BottomNavigationBarItem(
                icon: Icon(Icons.security), title: Text('safe')),
          ],
          onTap: (tappedIndex) {
            print('tappedIndex:$tappedIndex'); },),),); }}Copy the code

The overall effect of the above code is as follows:

)

In the following code, the value passed in as title is used to display the task manager on an Android phone as the task name.

runApp(MaterialApp(
    title: 'Android Task name when switching task Management',
    home: QiStatelessApp(),
  ));
Copy the code

The schematic diagram is as follows:

In addition, the MaterialApp control interface style is Android style, and CupertinoApp interface style is iOS style.

3. Simple page effect of Flutter

In this article, THE author will create a Flutter page with the following effects.

4. Introduction to the related widgets on the above page

Below I describe the widgets used in the above pages.

(1) Text

Text('Hello World'),
Copy the code

Text displays Text content.

(2) Image

Image.network(
              'https://upload.jianshu.io/collections/images/1673367/8.png? imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240'),
Copy the code

Image Displays network images

(3) FlatButton

FlatButton(
    child: Text(
      'FlatButton',
      style: TextStyle(
        backgroundColor: Colors.yellow,
      ),
    ),
    onPressed: () {
      print('press FlatButton');
      setState(() {
        _centerString = 'Change Self'; }); },),Copy the code

FlatButton can display content and accept interaction.

(4) GestureDetector

  GestureDetector(
    child: Text(
      'GestureDetector',
      style:
          TextStyle(color: Colors.red, backgroundColor: Colors.yellow),
    ),
    onTap: () {
      print('GestureDetector'); },),Copy the code

GestureDetector can wrap content and accept interaction.

(5)Column

Column(
        children: <Widget>[
          Text('Hello World'),
          Icon(Icons.share),
          FlatButton(
            child: Text('FlatButton'),
            onPressed: (){
              print('press FlatButton'); }),]),Copy the code

Column is used to display children content in a Column.

(6)ListView

A ListView is like a list. Use listtiles to display the contents of a list.

ListView(
    children: <Widget>[
      ListTile(
        title: Text('name'),
        trailing: Text('FlutterDev'),
      ),
      ListTile(
        title: Text('gender'),
        trailing: Text('male'),
      ),
      ListTile(
        title: Text('region'),
        trailing: Text('hebei'),
      ),
      ListTile(
        title: Text('mobile phone'),
        trailing: Text('176 * * * * * 9396'),
      ),
    ListTile(
      title: Text('other'),
      subtitle: Text('subtile'),
      leading: Icon(Icons.security),
      trailing: Icon(Icons.share),
      onTap: () {
        print('ListTile1'); }),]),Copy the code

(7) ListTile

Listtiles are items in a list.

// List entries
ListTile(
  / / title
  title: Text('ListTile1'),
  / / subheadings
  subtitle: Text('subtile1'),
  // Widget to the left of the title
  leading: Icon(Icons.security),
  // Widget to the right of the title
  trailing: Icon(Icons.share),
  onTap: () {
    print('ListTile1'); },),Copy the code

5. Page hopping and sending back data

Page jump and pass values can be passed through the constructor.

Navigator.push(context,
    MaterialPageRoute(builder: (context) {
  return QiListViewPage('iOS Dev');
})).then((onValue) {
  print('Returned data:$onValue');
});
Copy the code

Return data.

Navigator.pop(context, 'FlutterDev');
Copy the code

Vi. Relevant codes

import 'package:flutter/material.dart';

// Application execution entry
void main(List<String> args) {
  // Initialize the specified Widget and draw the Widget rendering effect to the screen
  // MaterialApp control interface style is Android style
  // The CupertinoApp interface is iOS style
  // runApp(MaterialApp(
  // title: 'Android task name ',
  // home: QiStatelessApp(),
  // ));

  runApp(MaterialApp(
    title: 'Android Task name when switching task Management',
    home: QiStatefulApp(),
  ));
}
Copy the code

// QiStatefulApp is a stateful Widget
class QiStatefulApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    returnQiState(); }}Copy the code

QiState is responsible for rendering the content that QiStatefulApp displaysclass QiState extends State<QiStatefulApp> {

  @override
  Widget build(BuildContext context) {
    ......
    );
  }
}
Copy the code

See Demo: QiFlutterPage for more code

7. Refer to learning materials

• Flutter. Dev/docs/develo…
• Book. Flutterchina. Club/chapter3 / fl…

Recommended articles:

5 minutes. Markdown syntax Swift 5.1(2) – Operator Swift 5.1(1) – Basic iOS UI state save and restore (3) iOS UI state save and restore (2) iOS UI state save and restore (1) iOS accurate timing common methods Sign In With Apple