Odd technical guidelines

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 of 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.

Architecture 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 some widgets

StatelessWidget, StatefulWidget, Text, Image, FlatButton, GestureDetector, ListView, etc.

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

The page displays Hello World

The Text Widget is required to display Hello World

The function code is as follows:

Text('Hello World'),Copy the code

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 entryvoid 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 Widgetclass 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 iOSTitle: Text('App Bar displays 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(' Icons ')),].          onTap: (tappedIndex) {Print (' tappedIndex: $tappedIndex ');          },        ),      ),    );  }}Copy the code

The overall effect of the above code is shown below

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

Flutter simple page effect

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

This section describes the widgets related to the preceding 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 '),The trailing: Text (' male '),      ),      ListTile(Title: Text(' region '),Trailing: Text(' hebei '),      ),      ListTile(Title: Text(' mobile '),        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 entriesListTile(/ / 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

Page hopping and data sending

Page jump and pass values can be passed through the constructor

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

Return data.

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

The relevant code

import 'package:flutter/material.dart';// Application execution entryvoid 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 Widgetclass QiStatefulApp extends StatefulWidget {  @override  State<StatefulWidget> createState() {    return QiState();  }}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

Reference study materials

  • https://flutter.dev/docs/development/ui/widgets-intr

  • https://book.flutterchina.club/chapter3/flutter_widget_intro.html

Related to recommend

  • The application and principle of Flutter Platform View

  • The Flutter is loaded to display

  • Use of Flutter Platform Channel and source code analysis

  • Flutter dart: IO library

The latest activity

360 Tech Carnival Season 8 – The beauty of testing

It’s all there

360 Tech Carnival Season 8 – The beauty of testing

Identify the qr code below or click to read the original text to register now

World of you when not

Just be your shoulders

There is no


360 official technical official account

Technology of dry goods | | hand information activities

Empty,

Is it a new friend? Remember to follow me first