Flutter project development guidance from basic entry to proficient in using the directory
Flutter from entry to master series of articles
This article is a directory of experience accumulation, tutorial sharing, and development notes sharing in Flutter development, and is being maintained continuously.
Inscription
- Holding the sword in the world, starting from your accumulation, you will strive for perfection wherever you go.
Flutter scaffolding rapid development template
If you are confused, you might as well come here to share every day, and then accumulate
more Widget applications. The editor has summarized them in the book.
New in September 2022
- Flutter custom TextInputFormatter text input filter Flutter realizes the input of 4 digits and automatically adds spaces 2022-9-01 update
New in July 2022 - Flutter text scrolling up and down is used for announcement message prompts 2022-7-13 update
- Flutter iOS packaging error /usr/lib/libswiftCore.dylib' (no such file) Update 2022-7-01
1 Introduction
-
Dart language foundation of flutter View details
-
The difference between the Dart core language basic const keyword and the final keyword
-
Flutter State LifecycleFlutter Widget LifecycleFlutter Application Lifecycle
-
Dart language basic Map, List, Set operation collectionView details
2 Flutter component basics
-
flutter from the preparation of the development environment to the development of the first application View details
-
Flutter uses Android Studio to create your first app View details
-
The first page of flutter development application View details
-
1.2.1 Flutter Theme Flutter MaterialApp Brief View Details
-
1.2.2 Flutter Main Layout Flutter Scaffold View Details
-
1.2.3 Brief description of flutter AppBar View details
-
1.2.4 Flutter Container View Details
-
1.2.4.1 Flutter Container width and height limit analysis View details
-
1.2.5 StatefulWidget and StatelessWidgetView Details
-
1.2.6 flutter Text text display View details
-
1.2.7 flutter Button button View details
-
1.2.8 flutter TextField text input box View details
-
The flutter input box restricts the input of numbers and decimals
-
flutter TextField is restricted to only allow input of decimal points
-
The basic use of TextField and the common properties of TextField
-
TextField focus acquisition control chapter "click to view details"
-
TextField input text style TextStyle article "Click to view details"
-
TextField input text textAlign alignment analysis chapter "click to view details"
-
TextField input text decoration configure border style and prompt text analysis "click to view details"
-
TextField TextEditingController Analysis "Click to View Details"
-
1.2.9 Flutter switch Switch and checkbox Checkbox for details
-
1.2.10 flutter Radio radio button View details
-
1.2.11 Flutter Horizontal and Vertical Layout Details View Details
-
1.2.12 flutter Stack frame layout, stacked and stacked View details
-
1.2.13 flutter Form form
-
1.2.14 A login page View details
-
Multi-language environment for internationalization in Flutter see details
-
1.3.1 Flutter Image image loading View details
-
1.3.2 Flutter ScrollView Swipe View Details
-
1.3.3 Flutter PageView Paging Switch
-
Flutter PageView slides left and right to switch views View details
-
Flutter PageView slides up and down to switch views View details
-
Flutter PageView pull-down refresh and pull-up load more view details
-
1.3.3 flutter CustomScrollView
-
1.3.4 flutter listView view details
-
1.3.5 Flutter listView pull-down refresh and pull-up load more View details
-
1.3.6 flutter GridViewView Details
-
-
1.3.7 flutter progress progress bar view details
-
1.3.8 flutter tab
-
- Tabs in the appbar View Details
-
- Tabs under appbar View Details
-
1.3.9 flutter AndroidView loads android native view view details
-
1.3.10 flutter UiKitView loads ios native view view details
-
1.4.1 PickView Time Picker View Details
-
1.4.2 PickView city selector
-
1.4.3-1 Flutter customizes the use of Dialog and updates the content in the Dialog View details
-
1.4.4 Flutter realizes the effect of carousel View Details
-
1.4.5 Navigation Bar Menu
-
- flutter BottomNavigationBar implements the bottom navigation bar for details
-
- flutter TabBar bottom navigation bar View details
-
- Flutter customizes BottomAppBar to implement irregular bottom navigation bar View details
-
- Flutter custom drawing layout to achieve irregular bottom animation navigation bar View details
-
1.4.6 flutter Toast message prompt box View details
-
1.4.7 flutter set rounded rectangle border View details
-
Flutter CupertinoSlidingSegmentedControl segmented component usage parsing
-
Flutter RefreshIndicator pull-down refresh component Material style refresh effect
-
Flutter CupertinoSliverRefreshControl Apple-style refresh effect
-
A different experience between Flutter Icons and CupertinoIcons
-
Graphic picture realized by Flutter ClipOval circular cropping
-
Flutter GridView is used to realize the function of nine-square grid layout article analysis | video explanation
-
The effect of a classic sliding and folding head picture implemented by Flutter CustomScrollView
-
The effect of a classic sliding and folding head picture implemented by Flutter NestedScrollView
-
Flutter Component Essay [66] Flutter Column Makes your Widgets vertically arranged one by one
-
Flutter Component Essay [70] Overview of the use of Image component
-
Flutter Component Essay [71] Overview of the use of Image component
-
Flutter component intensive talk [72] Image image loading local image first bomb
-
Flutter Component Essay [73] Image image loading local image 1 second bomb
-
Flutter's personalized Contrainer border style [Flutter Component Essay 53]
-
Clever use of Flutter Contrainer [Flutter Component Essay 51]
-
The latest update 1.4.7 flutter set rounded rectangle border (click for details)
-
The latest update 1.4.6 flutter Toast message prompt box (click to view details)
3 Flutter core function foundation
-
2.1.1 The flutter widget adds click, double-click, long-press, press and lift event listeners View details
-
2.1.2 flutter InkWell sets water ripple click effect details View details
-
2.1.3 Set the ripple click effect for the picture in Flutter View details
-
Flutter WillPopScope double-click to return and interface exit prompt
2020.12.28
2020.12.27
2020.12.25
2020.12.21
-
Flutter Duration detailed
overview2020.12.17 -
Flutter video playback, Flutter VideoPlayer video playback components essentials
2020.12.01
2020.11.30
-
Flutter drawing Paint strokeCap extension type strokeJoin corner type graphic analysis
-
Flutter ClipPath custom CustomClipper to play with different background patterns
-
Basic usage of Flutter AlertDialog pop-up box, overview of Flutter showDialog method usage
-
Flutter A beautiful user experience landing page shaking prompt text prompt
-
Flutter RefreshIndicator pull-down refresh component Material style refresh effect
-
Flutter CupertinoSliverRefreshControl Apple-style refresh effect
-
Automatic carousel effect realized by Flutter PageView Automatic carousel effect realized by Timer
-
Flutter NestedScrollView sliding and folding head pull-down refresh effect
-
Flutter TabBar tab bar background color, click water ripple color configuration
-
Flutter ListView partial refresh data, ListView likes and favorites
-
Optimization of Loading Image Data in ListView in FlutterView Details
-
Flutter asynchronously loads FutureBuilder to solve the redrawing solution See details
-
Basic use of async and await for asynchronous programming in FlutterView details
-
Flutter delay task, Flutter realizes delay task through Future and Timer View details
-
Analysis of the principle of async and await asynchronous programming in FlutterView details
-
The difference between Flutter's Flexible and Expanded View details
-
FocusNode in Flutter uses analysis to capture and monitor the focus event of Flutter input box View details
-
Flutter bottom navigation bar BottomNavigationBar page status keep alive solution View details
-
Talking about the state of Flutter View details
-
App upgrade plan for flutter cross-platform developmentView details
-
Flutter NestedScrollView pull-down refresh solution 1 See details
-
4.1.1 Flutter realizes two-way communication between Flutter and Android iOS through BasicMessageChannel View details
-
4.1.2 Flutter implements two-way communication between Flutter and Android iOS through MethodChannel View details
-
Flutter Umeng plug-in development and useView details
-
4.2.3 Flutter widget embedded in android WebView View details
-
4.2.4 Flutter widget embedded in ios webview view details
-
4.1.1 Flutter implements two-way communication between Flutter and Android iOS through BasicMessageChannel View details
-
4.1.2 Flutter implements two-way communication between Flutter and Android iOS through MethodChannel View details
-
4.1.1 Flutter widget embedded in android TextView View details
-
4.1.2 Flutter widget embedded in ios UiLabel View details
-
4.2.1 Flutter embeds android TextView for details
-
4.2.2 Flutter embeds ios UILabel for details
-
4.2.3 Flutter widget embedded in android WebView View details
-
4.2.4 Flutter widget embedded in ios webview view details
-
Integrating aurora push in flutter application development (the first article of flutter aurora push) see details
2019.7.15 early morning
- The latest update 4.1.1 flutter actively calls android native methods View details
- The latest update 4.1.2 Flutter actively calls ios native methods View details
4 Flutter animation topics
-
Flutter AnimatedWidget realizes automatic refresh of animation
-
Sliding switching digital animation effect implemented by Flutter AnimatedSwitcher
-
Flutter Animations showModal modal animation to open a new page
-
Basic use of Flutter AnimatedSwitcher animation switching components
-
Flutter shaking animation, shaking animation, Flutter text shaking effect
-
AnimatedOpacity in Flutter implements transparency gradient animation effect View details
-
Flutter transparency gradient animation FadeTransition achieves transparency gradient animation effect View details
-
Flutter Transparency Gradient Animation Opacity implements transparency gradient animation effect See details
-
Flutter splash screen transition animation, flash placeholder animation See details
-
Flutter's AnimatedDefaultTextStyle realizes the animation transition switching effect of text style View details
-
Flutter's AnimatedContainer implements container-style animation switching View details
-
flutter SlideTransition realizes translational animation View details
-
flutter RotationTransition implements rotation animation View details
-
3.3.1 Flutter ScaleTransition implements zoom animation View details
-
3.3.2 flutter PositionedTransition realizes zoom animation View details
-
flutter FadeTransition implements transparency gradient animation View details
-
Flutter SliverAnimatedOpacity transparent gradient animation effect
5 Image Drawing Topic
- In-depth analysis of Flutter's image rendering principleView details
- In-depth analysis of Widget, Element, and RenderObject roles in Flutter View details
6 Flutter Demo Collection
-
Flutter MouseRegion link highlighting style only you can't think of, no you can't do it
-
Flutter realizes the function of WeChat shake Flutter acceleration sensor
-
Flutter Slidable list side sliding menu list side sliding delete [ source code github ] [ video ]
-
Flutter ImageFilter Gaussian blur effect BackdropFilter achieve filtering effect
-
Flutter loads Html and implements two-way calls with JS View details
-
Flutter pull-up drawer effect View details
-
Flutter search box SearchBaView details
-
Set the ripple click effect for the image in Flutter See details
-
Flutter image add watermark function View details
-
Flutter upward animation pop-up menu effect View details
-
Flutter circular animation pop-up menu view details
-
Flutter Novice Guide Mask (Floating Layer) View Details
-
Flutter develops imitation Douyin homepage slide up and down to switch play video effect View details
-
Flutter page drag button to achieve 2022-3-6 update
-
Flutter text scrolling up and down is used for announcement message prompts 2022-7-13 update
7 Flutter network requests
-
Overview of Dio Post Requests, the Core Basic Network Framework of Flutter
-
Flutter network programming 03 Clever use of parameters for Dio Get request
-
Flutter network dio framework public request parameters, request header usage summary View details
-
Summary of the use of flutter network dio framework get request View details
-
Basic use of flutter network request framework dioView details
-
Flutter network dio framework get request use summary view details
8 Flutter state management
- Flutter Provider asynchronous communication, Provider state management
- Flutter BLoC asynchronous communication, basic use of BlocBuilder, preliminary exploration of BlocProvider
- A countdown function implemented by Flutter StreamBuilder
- Flutter StreamBuilder updates data asynchronously
- Flutter StreamController asynchronous communication, Streamr stream asynchronous communication
- Flutter ValueNotifier asynchronous communication, ValueListenableBuilder asynchronous update data
9 Flutter app debugging tips
- Flutter Debugging Tips Flutter Inspector
- Android Studio quickly locates code to double your development efficiency
10 Practical Topics
- Flutter WeChat sharing function implementation
- Flutter login page Demo copy can be used
- Flutter calls Baidu map APP to realize location search and route planning
10 Flutter app development
-
2.2.1 Flutter log output LogUtil usage View details
-
2.2.2 Flutter countdown TimerUtil usage View details
-
2.2.3 Flutter converts milliseconds to date and time format View details
-
2020 -12-05 The first day of Flutter application development from 0 to 1 infrastructure construction effect preview
-
2020 -12-06 On the second day , Flutter project creation, basic breakpoint debugging in Android Studio, application icon replacement, and application name modification
-
2020 -12-07 On the third day , Flutter builds the application startup page from 0 to 1, and the splash screen page has 600 lines of subtitles for everyone to play easily - is being released
-
2020 -12-08 The fourth day of Flutter from 0 to 1 permission application
-
2020 -12-09 Day 5 Flutter Permission Application Package from 0 to 1 - iOS Permission Application Adaptation
…
- 2021-01-22 The thirty-eighth day Flutter is an animated progress bar with a horizontal gradient color – [source code]
- 2021-01-23 The thirty-ninth day of Flutter list data group display, hierarchical display, copy and use directly
- 2021-01-23 On the 40th day , Flutter slides a picture and slides the browser to the last one to exit browsing [source code]
- 2021-01-23 The forty-day Flutter image browser slides to the last one and drags to open the next page [source code]