preface

I have learned about Flutter for nearly three weeks, and I want to summarize it. However, I have learned too much about Flutter, from Dart language to Flutter layout, basic widgets, lists, asynchronism, network programming and surrounding ecology. There are many points that CAN be discussed in detail. This article will introduce you to Flutter development from a small Todolist example, rather than simply explaining the API.

What is a Flutter

Flutter is an open source mobile application development kit developed by Google for Android, iOS, Windows, Mac, Linux, and Google Fuchsia. Unlike H5 + Uniapp and JavaScript + React Navite, the underlying structure of Flutter uses a self-drawn UI+ native rendering. Its performance and development efficiency beat those of Flutter, and it has found commercial applications, such as Xianyu and Taobao Price Version. All watermelon videos are developed with Flutter.

In Flutter, all variables are objects and everything is widgets (a reference to the React component).

Develop TodoList

This article will not teach you how to build a development environment for Flutter. If you want to build Flutter, the website for Flutter is more detailed. We can go to the Dartpad website to develop Flutter directly.

The basic structure

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(child: Text('Hello, World! '))); }}Copy the code

Operation effect:Code parsing:

  • import 'package:flutter/material.dart';This is required to use the Flutter component, which contains basic components such as Text, Image, Center, etc.
  • mainThe function is the entry function to a Flutter, which usesrunAppRun theMyAPPThe weiget.
  • And then we defined itMyAppThis Weiget, he rewrites hisbuildMethod, usedMaterialAppThis entry widget defines what the home page looks like.

The MaterialApp also contains properties such as title and routes.

Stateless StatelessWidgets and stateful StatefulWidgets

Like stateful components and stateless components in React, stateful components have separate interaction logic and business data that are updated by setState. Stateless components do not. All data is passed in from outside.

Develop the Todo page

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    returnMaterialApp( home: TodoPage(), ); }}// Add new code
class TodoPage extends StatefulWidget {
  TodoPage({Key key}) : super(key: key);

  @override
  _TodoPageState createState() => _TodoPageState();
}

class _TodoPageState extends State<TodoPage> {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Hello, World! ')); }}Copy the code

Code parsing:

  • Because we want to have data and interaction logic, we useStatefulWidgetTo create a statefulTodoPageThe widget.
  • First we useTodoPageInitialize some input parameters and inherit some stuff from the parent class.
  • And then we rewrote itcreateStateThis method, let it generate one_TodoPageStateThe data.
  • _TodoPageState inherits state, in which you can define some responsive variables.

The Scaffold Scaffold

class _TodoPageState extends State<TodoPage> {
  @override
  Widget build(BuildContext context) {
    // Add new code, omit some unchanged code...
    return Scaffold(
      appBar: AppBar(title: Text('todo list')),
      body: Center(child: Text('Hello, World! '))); }}Copy the code

Scaffold has properties such as appBar, drawer, bottomNavigationBar and body, which can quickly build a page structure

Define the data and Model

// Add new code
class TodoModel {
  TodoModel({
    this.id,
    this.title,
    this.complete = false});int id;
  String title;
  bool complete;
}

class _TodoPageState extends State<TodoPage> {
  // Add new code, omit some unchanged code...
  List<TodoModel> todos = [];
  int id = 0;
  / /...
}
Copy the code

Code parsing:

  • Here we use the List type definition in DARTtodosThe variable int defines an ID. See more about the dart typeDart Official Documentation
  • TodoModelWhat is this? If you’ve ever written Typescript, you already know that TodoModel defines todos internal structure types, which can be used with handy hints and type detection.

Build input boxes and lists

The basic structure of Flutter is an input form and a list to display Todo. In Flutter, we use the TextField widget to create input fields and the ListView to build lists:

class _TodoPageState extends State<TodoPage> {
  List<TodoModel> todos = [];
  int id = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('todo list')),
      body: Column(children: [
      TextField(),
      Expanded(
          child: ListView.builder(
              itemBuilder: (context, index) {
                TodoModel item = todos[index];
                returnListTile( title: Text(item.title), ); }, itemCount: todos.length)), ]) ); }}Copy the code

Code parsing:

  • ColumnIs a vertical layout widget.
  • Two important properties of ListView,itemBuilder 和 itemCountOne is the element that builds the list item, and the other is the number of lists. The combination makes a scrollable list.
  • ListTile 和 Text

Note: Errors are often reported when using Column because of restrictions on the Flutter container. In this case, Expanded was used to wrap the ListView to prevent similar errors.

Add a Todo

class _TodoPageState extends State<TodoPage> {
  / /...
  void addTodo(text) {
    TodoModel item = TodoModel(
      id: id++,
      title: text,
      complete: false,); setState(() { _todos.add(item); }); }// Add new code, omit some unchanged code...
  TextField(onSubmitted: addTodo)
  // ...
}

Copy the code

Code parsing:

  • Defines a method to add toDo.
  • The TextField commit event binds the addTodo method.

Delete Todo

class _TodoPageState extends State<TodoPage> {
  / /...
  void deleteTodo(index) {
    List newTodos = todos;
    newTodos.remove(newTodos[index]);
    setState(() {
      todos = newTodos;
    });
  }
  // Add new code, omit some unchanged code...
	ListTile(
    title: Text(item.title),
    trailing: InkWell(
      onTap: () {
        deleteTodo(index);
      },
      child: Icon(Icons.close)),
  )
  // ...
}

Copy the code

Code parsing:

  • Defines thedeleteTodoMethod to delete todo
  • The trailing attribute is added to ListTitile, and the child component is an InkWell that is used to bind the delete event, followed by an Icon widget.

Update the Todo

class _TodoPageState extends State<TodoPage> {
  / /...
  void updateTodo(index) {
    List<TodoModel> newTodo = todos; TodoModel item = newTodo[index]; item.complete = ! item.complete; setState(() { todos = newTodo; }); }// Add new code, omit some unchanged code...
	ListTile(
    onTap: () {
      updateTodo(index);
    },
    title: Text(
      item.title,
      style: TextStyle(
        decoration: item.complete
        ? TextDecoration.lineThrough
        : TextDecoration.none),
    ),
    trailing: InkWell(
      onTap: () {
        deleteTodo(index);
      },
      child: Icon(Icons.close)),
  )
  // ...
}

Copy the code

Code parsing:

  • defineupdateTodoMethods.
  • Bind a click event onTap to the ListTile to update the Todo.
  • Style the title’s text widget so that it displays the strikeout if it’s finished and not vice versa.

The complete code

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    returnMaterialApp( home: TodoPage(), ); }}class TodoModel {
  TodoModel({
    this.id,
    this.title,
    this.complete = false});int id;
  String title;
  bool complete;
}

class TodoPage extends StatefulWidget {
  TodoPage({Key key}) : super(key: key);

  @override
  _TodoPageState createState() => _TodoPageState();
}

class _TodoPageState extends State<TodoPage> {
  List<TodoModel> todos = [];
  int id = 0;

  void addTodo(text) {
    TodoModel item = TodoModel(
      id: id++,
      title: text,
      complete: false,); setState(() { todos.add(item); }); }void deleteTodo(index) {
    List newTodos = todos;
    newTodos.remove(newTodos[index]);
    setState(() {
      todos = newTodos;
    });
  }

  void updateTodo(index) {
    List<TodoModel> newTodo = todos; TodoModel item = newTodo[index]; item.complete = ! item.complete; setState(() { todos = newTodo; }); }@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('todo list')),
        body: Column(children: [
          TextField(onSubmitted: addTodo),
          Expanded(
              child: ListView.builder(
                  itemBuilder: (context, index) {
                    TodoModel item = todos[index];
                    returnListTile( onTap: () { updateTodo(index); }, title: Text( item.title, style: TextStyle( decoration: item.complete ? TextDecoration.lineThrough : TextDecoration.none), ), trailing: InkWell( onTap: () { deleteTodo(index); }, child: Icon(Icons.close)), ); }, itemCount: todos.length)), ])); }}Copy the code

conclusion

In this paper, we made a very simple TodoList, which realized the function of adding, deleting, checking and modifying. Through this example, we learned the basic structure of Flutter and its basic components Text, Column, ListView, Dart function, type, Model and so on.

There are also some important aspects of Flutter that are not covered in this article, such as route management, network requests, asynchronous programming, and JSON parsing. These are all essential to a Flutter development project. I will publish a more complete tutorial on Flutter in the future, including the above and the use of the common Flutter widget APIS. Dart language summary and development encountered some problems, so as to make a summary of the knowledge of Flutter, also hope to help you interested in learning about Flutter!!