foreword
Mobile-first is a thing of the past, and now we are entering the era of omni-platform first. In 2023, cross-platform development will become even more important. Cross-platform development frameworks such as React Native, Flutter, and Electron will become must-have skills for Android developers. At the same time, understanding the characteristics and best practices of different platforms will also become an important learning direction.
In recent years, with the continuous emergence of apps developed by Flutter, its flexible and efficient programming experience and a set of codes can run on the web, iOS, Andriod, macOS, Windows, and Linus. It has the advantages of building a good development ecology and easy maintenance in the later stage. , Gradually be recognized by developers and enterprises.
What is Flutter
Flutter is an open source UI toolkit that leverages a single code base to build natively compiled mobile, web, and desktop applications. Flutter, led by Google, allows developers to build expressive, flexible designs, beautifully styled applications that run fast. The core language of Flutter is Dart, a modern multi-paradigm language capable of compiling native code for multiple platforms.
Currently, Flutter has more than 153k stars on Github (109k more than react-native), 25.3k forks (23.3k more than react-native), 3.6k watches, and more than 1.2k code contributors (less than react-native 2.5k), is a proper cross-end popular solution.
The advantages of Flutter are
1. UI and business logic are applicable to different platforms
Basically all cross-platform frameworks provide a way to share code bases between target platforms, however, Flutter is an exception, which allows sharing of UI code as well as the UI itself.
2. Reduce development time
In our experience, building an average, medium-sized Android app also takes at least 40 seconds to deliver to a test device; sometimes, tweaking smaller skins in the layout can take a lot of time.
3. Accelerate the speed of product launch
In most cases, a Flutter app requires at least two times less development man-hours than the same app developed for Android and iOS separately.
The reason is simple: you don't have to write code for a specific platform alone to get the visual effects you want; any 2D-based UI can be implemented in Flutter without having to be tied to the native application.
4. Comparable to native
Flutter is directly connected to the underlying rendering engine, unlike RN, which needs to be converted into UI components provided by the native system first, so in theory, Flutter should be equivalent to native in terms of performance, but because the system usually has many native applications. optimization, so the word "comparable" can only be used implicitly.
5. Implement any complex, custom animation UI
One of the greatest advantages of Flutter is the ability to customize anything displayed on the screen, no matter how complex it is.
Although it is also possible to implement a custom UI natively, the amount of work required is different in comparison.
6. Independent rendering engine
Flutter uses Skia to render to the canvas provided by the platform. Thanks to the high-performance engine, Flutter's built-in UI can be started on almost any platform. In other words, it is no longer necessary to tweak the UI to migrate it to the target platform, greatly simplifying the development process.
7. Simple logic implementation for the platform
In addition to UI, many current mobile applications rely heavily on advanced OS-level functions, such as: obtaining GPS coordinates, Bluetooth communication, collecting sensor data, permission processing, etc., and many of these functions can be provided by Google when developing Flutter applications. Type plug-in to get through.
In addition, this big advantage should be everyone's favorite - looking for a job! ! !
As can be seen from the above figure, Flutter is also a bonus item for Android development positions, and many major manufacturers also need talents in this area. And the salary is not low!
So how to learn Flutter?
There are also many learning methods on the Internet, but the learning route is not very friendly to novices. In order to facilitate everyone to quickly learn Flutter, here is the Flutter learning roadmap and "Flutter Dart Language Programming Beginner to Master" & "Flutter Practical Combat: Second Edition "Help everyone configure the relevant environment, learn the basic syntax of Flutter and the actual application of the final project.
Friends in need scroll down to the end of the article to get it for free! ! ! !
Learning route:
Dart language is the development language of Flutter, so we need to master the basics of Dart language
"Flutter Dart language programming entry to proficiency"
Chapter 1 Dart Language Basics
- Environmental preparation
- basic grammar
Chapter 2 Dart Asynchronous Programming
- Dart's event loop
- Scheduling tasks
- delayed task
- Detailed explanation of Future
- async and await
- lsolate
Chapter 3 Detailed Explanation of Asynchronous Stream
- What is Stream
- single subscription stream
- broadcast stream
- Stream Transformer
- Summarize
Chapter 4 Dart Standard Input and Output Streams
- file operation
Chapter 5 Dart Network Programming
- TCP server
- TCP client
- UDP server
- UDP client
- HTTP server and request
- WebSocket
Chapter 6 Flutter Crawler and Server
- Dart crawler development
- Dart server
- Create a Flutter project demo
- Summarize
Chapter 7 Dart server development
- Registration and login implementation
Chapter 8 Dart calls C language mixed programming
- Environmental preparation
- Test the Dart ffi interface
- Summarize
Chapter 9 Mutual call between Dart and Lua in LuaDardo
- Take the C API
- create runtime
- Dart tunes Lua
- Lua to Dart
After mastering the Dart language, we can master the knowledge points of Flutter through actual combat
"Flutter in Action: Second Edition"
Chapter 1: Getting Started
- 1.1 Introduction to Mobile Development Technology
- 1.2 Initial Flutter
- 1.3 Build a Flutter development environment
- 1.4 Introduction to Dart language
Chapter 2: The first Flutter application
- 2.1 Counter application examples
- 2.2 Introduction to Widgets
- 2.3 State Management
- 2.4 Routing Management
- 2.5 Package Management
- 2.6 Resource Management
- 2.7 Debugging Flutter applications
- 2.8 Flutter exception capture
Chapter 3: Basic Components
- 3.1 Text and styles
- 3.2 Buttons
- 3.3 Picture and ICON
- 3.4 Radio switches and check boxes
- 3.5 Input box and form
- 3.6 Progress Indicator
Chapter 4: Layout Components
- 4.1 Introduction to Layout Components
- 4.2 Layout principles and constraints (constraints)
- 4.3 Linear Layout (Row and Column)
- 4.4 Flexible Layout (Flex)
- …
Chapter 5: Container Components
- 5.1 Padding
- 5.2 Decorated Container (DecoratedBox)
- 5.3 Transform (Transform)
- 5.4 Container component (Container)
- 5.5 Clipping
- 5.6 Space adaptation (FittedBox)
- 5.7 Page skeleton (Scaffold)
Chapter 6: Scrollable Components
- 6.1 Introduction to Scrollable Components
- 6.2 SingleChildScrollView
- 6.3 ListView
- 6.4 Scroll monitoring and control
- …
Chapter 7: Functional Components
- 7.1 Navigation return interception (WillPopScope)
- 7.2 Data sharing (InheritedWidget)
- 7.3 Cross-component state sharing
- 7.4 Colors and themes
- 7.5 On-demand rebuild (ValueListenableBuilder)
- 7.6 Asynchronous UI update (FutureBuilder, StreamBuilder)
- 7.7 Detailed dialog box
Chapter 8: Event Handling and Notification
- 8.1 Raw Pointer Event Handling
- 8.2 Gesture Recognition
- 8.3 Flutter event mechanism
- 8.4 Gesture Principles and Gesture Conflicts
- 8.5 Event Bus
- 8.6 Notification Notification
Chapter 9: Animation
- 9.1 Introduction to Flutter animation
- 9.2 Animation Basic Structure and Status Monitoring
- 9.3 Custom routing switching animation
- 9.4 Hero animation
- 9.5 Interlaced animation
- 9.6 Animation switching component (AnimatedSwitcher)
- 9.7 Animated Transition Components
Chapter 10: Custom Components
- 10.1 Introduction to custom component methods
- 10.2 Combining existing components
- 10.3 Combination Example: TurnBox
- 10.4 CustomPaint and Canvas
- 10.5 Self-drawing example: circular background gradient progress bar
- 10.6 Self-drawn component: CustomCheckbox
- 10.7 Self-drawn components: DoneWidget
- 10.8 Watermark Example: Text Drawing and Off-Screen Rendering
Chapter 11: File Operations and Network Requests
- 11.1 File Operation
- 11.2 Initiate HTTP request through HttpClient
- 11.3 Http request library-dio
- 11.4 Example: Http download in chunks
- …
Chapter 12: Flutter Extensions
- 12.1 Packages and plugins
- 12.2 Flutter Web
Chapter 13: Internationalization
- 13.1 Let the App support multiple languages
- 13.2 Implementing Localizations
- 13.3 Using the Intl package
- 13.4 Frequently asked questions about internationalization
Chapter 14: Flutter Core Principles
- 14.1 Flutter UI framework (Framework)
- 14.2 Element、BuildContext和RenderObject
- 14.3 Flutter startup process and rendering pipeline
- 14.4 Layout process
- 14.5 Drawing (1) Drawing principle and Layer
- …
Chapter 15: A Complete Flutter Application
- 15.1 Github client example
- 15.2 Flutter APP code structure
- 15.3 Model class definition
- 15.4 Global Variables and Shared State
- 15.5 Network request encapsulation
- 15.6 APP entrance and home page
- 15.7 Login page
- 15.8 Multilingual and multitheming
Due to too much content, the catalog and part of the content shown in the screenshot, the complete document collection method can be obtained for free by scanning the QR code below!
