Custom Drawing in Flutter For some complex or irregular UIs, we may not be able to achieve the desired result simply by combining other components. For instance, we might need a regular hexagon, a gradient circular progress bar, or a chessboard. Of course, sometimes we can use im···
Customizing Components in FlutterWhen the existing components provided by Flutter cannot meet our needs, or when we need to encapsulate some common components for code sharing, we need to create custom components. In Flutter, there are three ways to customize components: through ···
Custom Animation Transition Components For convenience in expression, we define components that execute transition animations when their widget properties change as "animation transition components." A prominent feature of these components is that they internally manage···
67.1 AnimatedSwitcher1. IntroductionIn practical development, we often encounter scenarios where UI elements need to be switched, such as tab switches or route transitions. To enhance the user experience, an animation is typically specified during these transitions to make them f···
66.1 IntroductionSometimes, we may need complex animations that consist of a sequence of animations or overlapping animations. For example, consider a bar chart where the height increases while changing color, and once it reaches its maximum height, we need to translate it a cert···
Route Management and Custom Route Transition AnimationsIn the "Route Management" section, we mentioned that the Material component library provides a MaterialPageRoute component, which uses platform-specific route transition animations. For example, on iOS, routes trans···
62.1 Basic Principles of AnimationIn any UI framework, the principle of implementing animations is the same: rapidly change the UI appearance multiple times over a period. Due to the phenomenon of visual persistence, what we ultimately see is a "continuous" animation, s···
In an app, we often need a broadcasting mechanism for cross-page event notifications. For example, in a login-required app, pages need to listen for user login or logout events to update their states accordingly. In this case, an event bus can be very useful. The event bus typica···
58.1 Flutter Event Handling ProcessThe Flutter event handling process primarily consists of two steps. To focus on the core flow, we will use user touch events as an example:Hit Testing: When a finger is pressed down, a PointerDownEvent is triggered. The current rendering (render···
56.1 Introduction to Raw Pointer EventsThis section introduces raw pointer events (Pointer Event, typically touch events on mobile devices), while the next section will cover gesture handling.In mobile platforms, the raw pointer event model is generally consistent across various ···
This section will provide a detailed overview of how to use dialogs in Flutter, including their implementation principles, style customization, and state management.55.1 Using DialogsDialogs are essentially UI layouts that typically include a title, content, and some action butto···
53.1 ValueListenableBuilderInheritedWidget provides a way to share data from top to bottom within the widget tree, but there are many scenarios where the data flow is not strictly top-to-bottom, such as bottom-to-top or horizontal flows. To address this issue, Flutter offers a Va···
51.1 Synchronizing State through EventsIn Flutter development, state management is an enduring topic. The general principle is: if the state is private to a component, it should be managed by that component itself; if the state needs to be shared across components, it should be m···
To prevent users from accidentally exiting the app by pressing the back button, many apps intercept the back button click and implement some validation to avoid misclicks. For example, they may only consider the user wants to exit if the back button is clicked twice within a cert···
In this section, we will explain the Sliver layout protocol and the process of creating custom Slivers by customizing two Slivers.47.1 Sliver Layout ProtocolThe layout protocol for Sliver is as follows:The Viewport passes the current layout and configuration information to the Sl···
The TabBarView is a layout component provided by the Material widget library, often used in conjunction with the TabBar.45.1 TabBarViewTabBarView encapsulates PageView, and its constructor is straightforward:TabBarView({Key?key,requiredthis.children,//&n
43.1 PageViewIf you want to implement page transitions and tab layouts, you can use the PageView widget. It’s important to note that PageView is a very significant widget, especially in mobile development, as it’s commonly used. Many apps include tab switching effects, image ca···
A grid layout is a common layout type, and the GridView widget is used to implement this layout in Flutter. This section focuses on its usage.42.1 Default ConstructorGridView can build a two-dimensional grid list, and its default constructor is defined as follows:GridView({Key?ke
In the previous sections, we introduced commonly used scrollable components in Flutter and mentioned that the scroll position of these components can be controlled using ScrollController. This section will first introduce ScrollController, then use ListView as an example to demon···
38.1 IntroductionThe SingleChildScrollView is similar to the ScrollView in Android; it can only accept a single child widget. Its definition is as follows:SingleChildScrollView({this.scrollDirection=Axis.vertical,//Scrollingdirection,defaultis&
The Material component library offers a variety of rich components. This section introduces the most commonly used Scaffold component. For the others, readers can refer to the documentation or explore the examples in the Material section of the Flutter Gallery.Note: Flutter Galle···
35.1 FittedBoxWhen a child component's size exceeds that of its parent component, Flutter will display an overflow warning and print an error log to the console unless handled properly. For example, the following code will cause an overflow:Padding(padding:constEdgeInse
33.1 ContainerWe have used the Container component multiple times in previous examples. In this section, we will take a closer look at the Container component. The Container is a composite container class that does not correspond to a specific RenderObject itself. Instead, it is ···
5.2.1 DecoratedBoxDecoratedBox allows you to draw some decorations (like background, border, gradients, etc.) either before (or after) its child component is rendered. The definition of DecoratedBox is as follows:constDecoratedBox({Decorationdecoration,Decorat
Threads and Smart PointersNow, let's return to the unresolved issue mentioned earlier: I want to share a read-only piece of data, such as a large array, across multiple threads. I can't clone this large array, nor can I move it to just one thread. Based on the logic of sm···
This article aims to explore some challenges in programming through the lens of Rust's language design, particularly its important programming paradigms, as this approach may offer deeper insights.The article is quite lengthy and contains a lot of code, so it's essential ···
In my twenty-plus years of experience, I've witnessed many technological changes and shifts in business models. The technologies we old programmers have dealt with are even more diverse than what today’s programmers encounter. Let me list some of the technologies I've le···
The list of the "Top 100 Consumer-Grade Generative AI Applications" is curated by the leading investment firm a16z. This edition was released in August 2024, with the selection criteria primarily based on monthly website traffic and mobile app usage data. Specifically, ···
Before delving into usage tips, let's revisit the basics of ChatGPT:ChatGPT is a natural language processing model developed by OpenAI, based on the GPT (Generative Pre-trained Transformer) architecture. It is a generative pre-trained transformer model optimized for conversat···
This article discusses several principles of system architecture that are generally applicable to relatively complex businesses. If you are dealing with simple applications with low traffic, you may draw opposite conclusions.Principle 1: Focus on Real Benefits, Not Technology Its···
When I connect to my colleague's interface, all the interfaces he defined are post requests. The reason is that post is safer for https. I am used to using restful APIs. If only post requests are safe for https? Then why do we need get, put, and delete? How can I refute him?W···
To provide some context, EaseProbe is a lightweight, standalone tool for health-checking services. It supports HTTP, TCP, shell, SSH, TLS, hosts, and various middleware checks. It can directly send notifications to mainstream messaging platforms like Slack, Telegram, Discord, Ema···
In the previous section, we discussed how, through Stack and Positioned, we can specify one or more child elements' precise offsets relative to the edges of their parent element, allowing them to overlap. However, if we simply want to adjust a child element's position wit···
When introducing Row and Column, if a child widget exceeds the screen bounds, an overflow error will occur, as shown below:Row( children: <Widget>[ Text("xxx" * 100), ],); The result is shown in Figure : As you can see, the overflow on
The so-called linear layout refers to arranging child components either horizontally or vertically. In Flutter, linear layouts are implemented using Row and Column, similar to the LinearLayout control in Android. Both Row and Column inherit from Flex, which will be discussed in d···
Layout widgets typically contain one or more child widgets, and different layout widgets arrange (or layout) their child widgets in various ways, as shown in Table 4-1 below:WidgetDescriptionUsageLeafRenderObjectWidgetBase class for non-container widgetsThese are the leaf nodes o···
The Material component library provides two types of progress indicators: LinearProgressIndicator and CircularProgressIndicator. Both can be used to indicate either a precise progress or an indeterminate one. Precise progress is usually applied in situations where task completion···
The Material component library provides the TextField input box component and the Form component. Let's introduce them one by one.20.1 TextFieldThe TextField is used for text input and offers many properties. We'll briefly introduce the main properties and then demonstrat···
The Material component library provides various button components such as ElevatedButton, TextButton, OutlinedButton, and others. All of these buttons are either directly or indirectly custom wrappers around the RawMaterialButton component, so most of their properties are the sam···
16.1 TextThe Text widget is used to display simple styled text. It contains several properties for controlling the appearance of the text. Here’s a simple example:Text("Helloworld",textAlign:TextAlign.left,);Text("Helloworld!I'mJa
