“This is the 19th day of my participation in the August Gwen Challenge, for more details: August Gwen Challenge” juejin.cn/post/698796…

The priority is to customize the ListView, but I still looked up the information and found that the magic Stepper can not fully meet the needs, but it provides a good idea. The small dish only studies the basic Stepper.

Source code analysis

Const Stepper({Key Key, @required this.steps, // Step list this.physics, // slide animation this.type = stepperType. vertical, // direction: CurrentStep = 0, // Step this.onStepTapped, // Step click callback this.onStepContinue, // Step continue button callback this.onStepCancel, // Step cancel button callback this.controlsBuilder, // custom control}) class Step const Step({@required this.title, // title this.subtitle, // subtitle @required this.content, Indexed, // State this.isActive = false, // whether to highlight})}Copy the code

Analysis of the source code shows that Stepper stores the Step list, and the number of steps is immutable, including the click callback, etc. Step is a class, not a Widget, so it cannot be used by itself.

Case try

Step

  1. Title is a descriptive title. Content is the content below the title and subtitle and contains the continue and Cancel buttons by default; Both are widgets and cannot be null.
Return Stepper(steps: [Step(title: Text('Step ')), content: Container(color: Colors. OrangeAccent. WithOpacity (0.4), the child: Text (' content of Step a))), Step (title: Text (' Step heading 2 '), the content: Container (color: Colors. BlueAccent. WithOpacity (0.4), the child: Text (' content of Step 2))), Step (title: Text (' three Step title), the content: Container (color: Colors. The purple. WithOpacity (0.4), the child: Text (' content of Step 3))));Copy the code

  1. Subtitle is the subtitle, under the title, the default font size smaller;
Return Stepper(steps: [Step(title: Text('Step ')), subtitle: Text('Step ')), content: Container(color: color) Colors. OrangeAccent. WithOpacity (0.4), the child: Text (' content of Step a))), Step (title: Text (' Step heading 2 '), the subtitle: Step subtitle Text (' 2 '), the content: the Container (color: Colors. BlueAccent. WithOpacity (0.4), the child: Text (' content of Step 2))), Step (title: The Text (' three Step title), the subtitle: Text (' Step subtitle three '), the content: the Container (color: Colors. The purple. WithOpacity (0.4), the child: Text('Step content 3 '))]);Copy the code

  1. A Flutter provides multiple state styles by default.

A. Indexed: displays each Step array subscript in a circle (starting with 1); Editing, showing the pencil in a circle; C. complete: complete state, display scale icon in the circle; D. Disabled: Indicates that the state is unavailable. E. error: indicates the error state. The exclamation mark icon is displayed in the red triangle.

return Stepper(steps: [
  Step(title: Text('Step state -> indexed'), state: StepState.indexed, content: Container()),
  Step(title: Text('Step state -> editing'), state: StepState.editing, content: Container()),
  Step(title: Text('Step state -> complete'), state: StepState.complete, content: Container()),
  Step(title: Text('Step state -> disabled'), state: StepState.disabled, content: Container()),
  Step(title: Text('Step state -> error'), state: StepState.error, content: Container())
]);
Copy the code

  1. IsActive is to set whether the current Step is highlighted, and only the icon is highlighted. The error state is highlighted by default, and the disabled state icon can also be highlighted.
return Stepper(steps: [
  Step(isActive: true, title: Text('Step state -> indexed'), state: StepState.indexed, content: Container()),
  Step(isActive: true, title: Text('Step state -> editing'), state: StepState.editing, content: Container()),
  Step(isActive: true, title: Text('Step state -> complete'), state: StepState.complete, content: Container()),
  Step(isActive: true, title: Text('Step state -> disabled'), state: StepState.disabled, content: Container()),
  Step(isActive: true, title: Text('Step state -> error'), state: StepState.error, content: Container())
]);
Copy the code

Stepper

  1. Type Includes horizontal display and vertical display. The default value is vertical.
Horizontal, steps: [Step(title: Text('Step title '), content: Container())), Step(title: Text('Step title 3 '), content: Container()), Step(title: Text('Step title 3 '), content: Container())]);Copy the code

  1. CurrentStep is the currentStep, and note that the array subscript starts at 0;
Return Stepper(type: StepperType. Horizontal, currentStep: 1, steps: [Step(title: Text('Step '), content: Container(child: Text('Step 1 ')), Step(title: Text('Step 2 '), content: Container(child: Text('Step content 2 ')), Step(title: Text('Step title 3 '), content: Container(child: Text('Step content 3 '))]);Copy the code

  1. OnStepTapped is Step tap callback, xiao CAI tries to tap to switch Step to get the highlight of the current Step;
var _curStep = 0; return Stepper(currentStep: _curStep, onStepTapped: (step) { setState(() { _curStep = step; }); }, steps: [Step(title: Text('Step '), content: Container(child: Text('Step ')), isActive: _curStep >= 0? True: False), Step(title: Text('Step '), content: Container(child: Text('Step ')), isActive: _curStep >= 1? True: False), Step(title: Text('Step '), content: Container(child: Text('Step ')), isActive: _curStep >= 2? True: false) ]);Copy the code

  1. OnStepContinue is a Step button click callback; **** is the callback of cancel button in Step; Small dish try to continue and cancel click on the Step switch;
return Stepper(currentStep: _curStep, onStepTapped: (step) { setState(() { _curStep = step; }); }, onStepContinue: () { setState(() { if (_curStep < 2) { _curStep++; }}); }, onStepCancel: () { setState(() { if (_curStep > 0) { _curStep--; }}); }, steps: [Step(title: Text('Step '), content: Container(child: Text('Step ')), isActive: _curStep >= 0? True: False), Step(title: Text('Step '), content: Container(child: Text('Step ')), isActive: _curStep >= 1? True: False), Step(title: Text('Step '), content: Container(child: Text('Step ')), isActive: _curStep >= 2? True: false) ]);Copy the code

  1. ControlsBuilder with custom continue and cancel buttons, if you do not need to display the empty Widget;
return Stepper(currentStep: _curStep, onStepTapped: (step) { setState(() { _curStep = step; }); }, onStepContinue: () { setState(() { if (_curStep < 2) { _curStep++; }}); }, onStepCancel: () { setState(() { if (_curStep > 0) { _curStep--; }}); }, controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}) { return Row(children: <Widget>[ Container( width: 100, child: Image.asset(_curStep == 0 ? 'images/icon_hzw01.jpg' : _curStep == 1 ? 'images/icon_hzw02.jpg' : 'images/icon_hzw03.jpg')), SizedBox(width: 30, height: 30), Column(children: < widgets > [FlatButton (color: Colors. OrangeAccent. WithOpacity (0.4), onPressed: onStepContinue, child: The Text (the 'next')), FlatButton (color: Colors. The purple. WithOpacity (0.4), onPressed: onStepCancel, child: Text (' previous step))]]); }, steps: [Step(title: Text('Step '), content: Container(child: Text('Step ')), isActive: _curStep >= 0? True: False), Step(title: Text('Step '), content: Container(child: Text('Step ')), isActive: _curStep >= 1? True: False), Step(title: Text('Step '), content: Container(child: Text('Step ')), isActive: _curStep >= 2? True: false) ]);Copy the code

  1. Set ClampingScrollPhysics() to slide continuously when Stepper is placed in ListView and cannot be fully displayed.
physics: ClampingScrollPhysics(),
Copy the code

Stepper is easy to use and fast. Although the style is relatively fixed, it cannot meet all needs, but it provides us with a good idea of customization. Small dish to Stepper research is not yet shallow, if there are mistakes, please give more guidance!

Source: Little Monk A Ce