Flutter from entry to mastery series of articles

This article is a catalog of lessons learned, tutorials and development notes in Flutter development, which is under ongoing maintenance.

Inscription – sword tianya, start from your drip accumulation, and will keep improving.

github? You might need Baidu synchronization
CSDN Netease Cloud classroom tutorial The Denver nuggets
zhihu Series of articles on Flutter The headline synchronization
* * *
There are free tutorials on Flutter on watermelon video, updated daily. Please pay attention to them and receive alertsClick to see tips Various series of tutorials

2020.09.19

  • The solution to rich file labels in Flutter

Development notes

  • Load images from Flutter in iOS
  • Overview of the use of MateriaApp [01]
  • Introduction to the basic use of the Flutter component [02]
  • [03] Route preparation of the MateriaApp component
  • 【04】 The MateriaApp is configured with a default startup page
  • 【05】 The jump to the page of the MateriaApp
  • Page 404 -01 of the MaterialApp component configuration
  • Description of THE Flutter Component [07] Page 404 -02 of the MaterialApp component configuration

2020.09.02

  • Flutter custom camera

  • Flutter animation, Flutter animation, Flutter effect of Flutter text

  • The difference between the const keyword and the final keyword underlying the Dart core language

  • Dart Core Foundation List Overview

  • Life cycle of a Flutter application

2020.08.02

  • Optimization of Flutter ListView to load image data

  • FutureBuilder solution to Flutter asynchronous loading redraw solution

  • Flutter asynchronous programming basic use of async and await view details

  • The delay task of Flutter is realized through Future and Timer

  • Flutter async and await asynchronous programming principle

  • Dart Basic Map, List, and Set operations

  • The principle of Flutter image rendering is analyzed in detail

  • Analyze the Widget, Element, and RenderObject roles in Flutter for details

  • AnimatedOpacity AnimatedOpacity of Flutter

  • Add Opacity gradient animation to Flutter

  • Flutter transparency gradient animation FadeTransition to achieve transparency gradient animation

2020.07.19

  • Flutter screen transition animation, flash placeholder animation see details
  • Flutter’s AnimatedDefaultTextStyle implements a text-style animation transition toggle effect
  • Flutter’s AnimatedContainer implements container-style animation switches to view details

2020.07.15

  • Flutter loads Html and implements bidirectional calls to JS to view details

2020.07.05

  • Flutter pull-up drawer effect

2020.06.22

  • Flutter search box SearchBa for details
  • Create a ripple effect for the image in Flutter to see more details
  • Add watermarks to Flutter images to view details
  • Flutter Network DIO framework public request parameters, request headers use summary to view details
  • Get requests for flutter network DIO framework using summary view details
  • Flutter up animation pop-up menu effect to see details

2020.05.27

  • The difference between Flexible and Expanded of flutter see details

2020.05.23

  • Flutter circular animation pop-up menu to view details

2020.05.09

  • Focus FocusNode in a Flutter uses analysis to capture and listen on focus events in the Flutter input box to view details

2020.04.19

  • The BottomNavigationBar of the Flutter page state keeps alive solution view details

2020.04.06

  • Discuss the State of Flutter for details

2020.03.15

  • Flutter Novice Guide Mask (Float layer) for details

2020.03.05

  • Flutter network request framework DIO basic use view details

  • Get requests for flutter network DIO framework using summary view details

2020.03.01

  • Scroll down on the home page of Flutter to switch the effect of playing a video to view details

2020.02.15

  • Flutter cross-platform App upgrade solution

2020.01.07

NestScrollView series of articles

  • The Flutter NestedScrollView dropdown refreshes the solution one to see the details

Aurora push series of articles

  • Learn more about the integration of The Aurora Push into Flutter application development

TextField series of articles

  • Basic Use of TextField and common properties of TextField
  • TextField Focus Capture Control “Click to see details”
  • TextField input TextStyle TextStyle textClick for details
  • TextField input text textAlign Alignment analysis
  • TextField input text decoration
  • TextField TextEditingController

2019.12.19

  • Internationalization of the multilingual environment in Flutter see details

2019.12.17

  • Flutter Friendly plugin for development and use view details

7.22 2019.

  • 4.2.3 Embed the Flutter Widget into android WebView to view details
  • 4.2.4 Embed the Flutter Widget into ios WebView to view details

7.17 2019.

  • 4.1.1 The BasicMessageChannel enables bidirectional communication between Flutter and Android iOS
  • 4.1.2 Flutter Implements bidirectional communication between Flutter and Android iOS through MethodChannel

2019.7.16

  • 4.1.1 Embed the Flutter Widget into the Android TextView to view details
  • 4.1.2 Embed the Flutter Widget into ios UiLabel to view details

Early 2019.7.15

  • Update 4.1.1 Flutter actively calls android native methods to view details
  • Update 4.1.2 Flutter actively calls the ios native methods to view the details

On the evening of July 12, 2019

  • Update 1.4.7 Flutter Settings with rounded rectangle borders
  • Update 1.4.6 Flutter Toast message prompt box

[Android Studio, Xcode is used to develop Flutter in this case.]

1 Stage 1 UI Basics

1.1 The first stage [Related to environmental Configuration]

  • 1.1.1 Review the details of Flutter from the development environment to the development of its first application

  • 1.1.2 Flutter uses Android Studio to create the first application to view the details

  • See the details on the first page of flutter development application

  • 1.1.4 Dart Language foundation of Flutter

1.2 Stage 1 Flutter [UI Basics -1]

  • 1.2.1 Topic Description of The Flutter MaterialApp View the details

  • 1.2.2 Main layout of the flutter View details about the flutter Scaffold

  • 1.2.3 Description of Flutter AppBar

  • 1.2.4 Container View details about flutter Container

  • 1.2.4.1 Restrictions on the width and height of a Flutter Container View the details

  • 1.2.5 StatefulWidget and StatelessWidget View details

  • 1.2.6 Display of flutter Text To view details

  • 1.2.7 Flutter Button To view details

  • 1.2.8 Flutter TextField text input box to view details

  • 1.2.9 flutter Switch Switch and Checkbox Checkbox view details

  • 1.2.10 Flutter Radio option box To view details

  • 1.2.11 The horizontal and vertical layout of flutter view the details

  • 1.2.12 Stack frame layout, Stack to view details

  • 1.2.13 Flutter Form Form

  • 1.2.14 A login page for details

1.3 Stage 1 Of Flutter [UI Basics -2]

  • 1.3.1 Load a flutter Image View the details

  • 1.3.2 Slide the flutter ScrollView to view details

  • 1.3.3 Flutter PageView Page switchover

    • Flutter PageView slides left and right to switch views to view the details
    • Flutter PageView slides up and down to switch views to view details
    • Flutter PageView pull-down refresh and pull-up load for more details

  • 1.3.3 Flutter CustomScrollView Customizes the slide effect code cloud view

  • 1.3.4 Flutter listView View details

  • 1.3.5 Flutter listView pull-down Refresh and pull-up load

  • 1.3.6 Flutter GridView to view details

  • 1.3.7 Flutter Progress check the flutter progress bar

  • 1.3.8 Flutter TAB

    • TAB in appBar for details
    • TAB under appBar for details

  • 1.3.9 Load the Android native View to view the details

  • 1.3.10 Flutter UiKitView loads ios native View to view details

1.4 Stage 1 Of Flutter [UI Basics -3]

  • 1.4.1 PickView Time picker to view details
  • 1.4.2 PickView City selector
  • 1.4.3 Pop-up Dialog View details
  • 1.4.3-1 Flutter Customization Uses Dialog and updates the contents of Dialog to see details
  • 1.4.4 Implement the wheel seeding map effect of FLUTTER View details
  • 1.4.5 Navigation Menu
    • The flutter BottomNavigationBar implements the BottomNavigationBar to view details
    • View details in the bottom navigation bar of the Flutter TabBar
    • The Flutter custom BottomAppBar implements irregular bottom navigation bar to view details
    • Flutter custom draws the layout to achieve irregular bottom animation to view details in the navigation bar
  • 1.4.6 Message Prompt box of FLUTTER Toast View details
  • 1.4.7 Flutter sets a rounded rectangle border to view details

2 The second stage function foundation

2.1 Flutter Gesture processing

  • 2.1.1 Add the flutter widget to listen for click, double click, long press, down and lift events to view the details
  • 2.1.2 Flutter InkWell Set water ripple click on effect details to see more details
  • 2.1.3 Set the ripple effect for the image in Flutter to see the details

2.2 Common Tools for FLUTTER

  • 2.2.1 Flutter log Output LogUtil use to view the details
  • 2.2.2 Flutter countdown TimerUtil usage View details
  • 2.2.3 Flutter converts milliseconds to date and time format to view details

2.2 Storage of FLUTTER Data

2.3 Route Redirection of the FLUTTER page

2.4 Flutter Network Request

2.5 Upload flutter OSS Ali cloud files

3 The third stage animation function

3.1 Flutter translation animation

  • 3.1.1 Implement the flutter SlideTransition animation to view details

3.2 Flutter rotation animation

  • 3.2.1 Implement rotation animation of flutter RotationTransition

3.3 Flutter zoom animation

  • 3.3.1 Implement the zoom animation of flutter ScaleTransition to view details
  • 3.3.2 Flutter PositionedTransition zoom animation to view details

3.4 Flutter transparent gradient animation

  • 3.4.1 Implement the transparency gradient animation of Flutter FadeTransition

4 Stage 4 Advanced Functions

4.1 Flutter native intermodulation with Android ios

  • 4.1.1 The BasicMessageChannel enables bidirectional communication between Flutter and Android iOS

  • 4.1.2 Flutter Implements bidirectional communication between Flutter and Android iOS through MethodChannel

  • 4.1.3 Flutter calls android camera

  • 4.1.4 Flutter calls ios camera

  • 4.1.5 Flutter calls Android sweep

  • 4.1.6 Flutter Calls ios sweep

  • 4.1.7 Calling An Android MP3 Recording

  • 4.1.8 Flutter calls ios MP3 recording

4.2 Embed android ios native View in Flutter
  • 4.2.1 Flutter embedded into android TextView to view details
  • 4.2.2 Embed the ios UILabel to view the details
  • 4.2.3 Embed the Flutter Widget into android WebView to view details
  • 4.2.4 Embed the Flutter Widget into ios WebView to view details
4.3 Android ios native uses the Flutter Widget
4.4 Development of flutter plug-in
  • 4.4.1 Flutter calls native Android ios custom camera plugin
  • 4.4.2 Flutter calls native Android ios scan plugin
  • 4.4.3 Flutter calls the native Webview plugin to view details
  • 4.4.4 Calls native recording MP3 format plugin for Flutter