This is the 29th day of my participation in Gwen Challenge

preface

In actual application development, we need to consider the user’s network status, if the network is not very good, request and response is slow or various progress status, we all need to use the load status and progress show friendly to users, allows users to make reasonable perception waiting, today let’s look at the Flutter of the use of various indicator Widget.

See the effect

LinearProgressIndicator

Simple to use

Our direct loading is an indicator that is always moving without any progress, such as the Google login, because there is no clear progress to show, so only a loaded state is shown.

LinearProgressIndicator()
Copy the code
  • Display effect

Parameters of the deployment

In many cases we need to change the background and the color of the progress bar, and also have a clear progress display. In this case, we can set the parameters.

Look at the source code

The LinearProgressIndicator integrates with the ProgressIndicator and has only one current class attribute, minHeight

ProgressIndicator abstract class, inherited from StatefulWidget. Why is this a StatefulWidget? There must be internal variables that need to be self-updated

Let’s look at State’s build method

  • _controller is the AnimationController, which drives internal updates
  • If value is not empty, build _buildIndicator, ignore _controller.value and use widget.value
  • If value is null, the update is built internally using AnimatedBuilder, resulting in the altimet-loading situation simply used above

Set up the schedule

Above we looked at the source code, now very clear, directly on the code

LinearProgressIndicator(
  value: 0.5.)Copy the code

Set the height

The current class attribute minHeight is used to set the height. The default value is 4

LinearProgressIndicator(
  value: controller.value,
  minHeight: 10.)Copy the code

Set the color

LinearProgressIndicator(
  value: controller.value,
  / / the background color
  backgroundColor: Colors.red,
  // Set the color of the progress bar
  valueColor: controller.drive(
    ColorTween(
      begin: Colors.greenAccent,
      end: Colors.orange,
    ),
  ),
)
Copy the code

Custom dynamic progress

Look at the source code to know that if you need to set the progress dynamically, you need to set the animation, the core code is as follows

// with TickerProviderStateMixin
// Animation controller
late AnimationController controller;
@override
void initState() {
  // Initialize the animation controller
  controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 3),
  )..addListener(() {
    // Listen for the refresh
    setState(() {});
  });
  // Set to run back and forth repeatedly
  controller.repeat(reverse: true);
  super.initState();
}

@override
void dispose() {
  / / destroy
  controller.dispose();
  super.dispose();
}

// Code usage
controller.value
Copy the code

CircularProgressIndicator (circular progress indicator)

Look at the linear one above, then look at the circular one, I won’t repeat the general content, and finally put a big GIF

Simple to use

CircularProgressIndicator()
Copy the code

Parameters of the deployment

// Set the schedule
CircularProgressIndicator(
  value: controller.value,
),
// Set the line width
CircularProgressIndicator(
  strokeWidth: 10,),// Set the color
CircularProgressIndicator(
  backgroundColor: Colors.grey.withOpacity(0.4),
  valueColor: controller.drive(
    ColorTween(
      begin: Colors.amber,
      end: Colors.green,
    ),
  ),
),
// Set progress + color
CircularProgressIndicator(
  value: controller.value,
  backgroundColor: Colors.grey.withOpacity(0.4),
  valueColor: controller.drive(
    ColorTween(
      begin: Colors.blue,
      end: Colors.pink,
    ),
  ),
)
Copy the code

The color of the progress bar is fixed

CircularProgressIndicator(
  value: controller.value,
  // Set a color
  valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
)
Copy the code

CupertinoActivityIndicator (iOS activity indicator)

Flutter is a cross-platform framework, so in addition to Google’s Material Design, there should also be iOS’s Cupertino style. Let’s take a look at this

Look at the source code

Read the source code of Flutter is very convenient and fast. Read the source code more and you will gain a lot.

Source code is very simple, only radius (radius, default is 10), animating (in animation), progress (progress) three parameters

Simple to use

CupertinoActivityIndicator()
Copy the code

Parameters of the deployment

CupertinoActivityIndicator(
  // Set the radius
  radius: 20,
),
CupertinoActivityIndicator.partiallyRevealed(
  radius: 20.// Set the schedule
  progress: controller.value,
),
Copy the code

Platform adaptation

Here, Flutter also provides us with load indicators that automatically adapt to the platform, with the same parameter allocation

CircularProgressIndicator.adaptive()
Copy the code
The iOS platform The Android platform

Source warehouse

Based on the latest version of Flutter 🔥

  • Flutter Widgets warehouse

Refer to the link

  • LinearProgressIndicator (Flutter Widget of the Week)
  • Flutter-LinearProgressIndicator
  • CircularProgressIndicator (Flutter Widget of the Week)
  • Flutter-CircularProgressIndicator
  • CupertinoActivityIndicator (Flutter Widget of the Week)
  • Flutter-CupertinoActivityIndicator

Pay attention to column

  • This article has been included in the column at 👇 below, you can follow it directly
  • Read more | The series continues to be updated

👏 welcome to like ➕ collect ➕ pay attention, please feel free to comment on 👇 if you have any questions, I will reply as soon as possible