Flutter 维护并记住步进器之间的状态

问题描述

我正在尝试实现日常任务步进器并使用 im_stepper 库。该库运行良好，并在罐头上完成了它需要的工作。

我在其中一个方面有点卡住了，我需要复选框并且需要维护复选框的状态。

import 'package:Flutter/material.dart';
import 'package:Flutter/widgets.dart';
import 'package:im_stepper/stepper.dart';

class IconStepperDemo extends StatefulWidget {
  @override
  _IconStepperDemo createState() => _IconStepperDemo();
}

class _IconStepperDemo extends State<IconStepperDemo> {
// THE FOLLOWING TWO VARIABLES ARE required TO CONTROL THE STEPPER.

// Initial step set to 5.
  int activeStep = 0;

// upperBound MUST BE total number of icons minus 1.
  int upperBound = 13;

//Logic for checkBoxs. Needs a revist.
  bool checkBox1 = false;
  bool checkBox2 = false;
  bool checkBox3 = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,home: Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: BackButtonIcon(),onpressed: () => Navigator.of(context).pop(),),brightness: Brightness.light,elevation: 10,centerTitle: true,title: Text("Daily Task List",style: TextStyle(
                color: Colors.white,decorationStyle: TextdecorationStyle.double,)),backgroundColor: PRIMARY,body: Padding(
          padding: const EdgeInsets.all(8.0),child: Column(
            children: [
              IconStepper(
                icons: [
                  Icon(Icons.task),Icon(Icons.alarm),Icon(Icons.flag),],// activeStep property set to activeStep variable defined above.
                activeStep: activeStep,// This ensures step-tapping updates the activeStep.
                onStepReached: (index) {
                  setState(() {
                    activeStep = index;
                  });
                },spaceHeightWidget(sizeParam: 30),header(),spaceHeightWidget(sizeParam: 20),task1(),task2(),task3(),Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [
                  prevIoUsButton(),nextButton(),);
  }

  /// Returns the next button.
  Widget nextButton() {
    return ElevatedButton(
      onpressed: () {
        // Increment activeStep,when the next button is tapped. However,check for upper bound.
        if (activeStep < upperBound) {
          setState(() {
            activeStep++;
          });
        }
      },child: Text('Next'),style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all<Color>(PRIMARY),);
  }

  /// Returns the prevIoUs button.
  Widget prevIoUsButton() {
    return ElevatedButton(
      onpressed: () {
        // Decrement activeStep,when the prevIoUs button is tapped. However,check for lower bound i.e.,must be greater than 0.
        if (activeStep > 0) {
          setState(() {
            activeStep--;
          });
        }
      },child: Text('PrevIoUs'),);
  }

  /// Returns the header wrapping the header text.
  Widget header() {
    return Container(
      decoration: Boxdecoration(
        color: PRIMARY,borderRadius: BorderRadius.circular(5),child: Row(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),child: Text(
              headerText(),textAlign: TextAlign.center,fontSize: 20,);
  }

  // Returns the header text based on the activeStep.
  String headerText() {
    switch (activeStep) {
      case 1:
        return 'Day $activeStep: Readings & Learning';

      case 2:
        return 'Day $activeStep: Understand your day';

      case 3:
        return 'Day $activeStep: Why is mindfulness important';

      default:
        return 'Day $activeStep: Lets get started';
    }
  }

  String taskText1() {
    switch (activeStep) {
      case 1:
        return 'Take morning reading';

      case 2:
        return 'Take morning reading';

      case 3:
        return 'Take morning reading';

      default:
        return 'Watch Video';
    }
  }

  String taskText2() {
    switch (activeStep) {
      case 1:
        return 'Watch breathing video';

      case 2:
        return 'Watch What is Mindfullness? Video';

      case 3:
        return 'Watch Why is Mindfulness Important Video';

      default:
        return 'Schedule reminders for morning exercise';
    }
  }

  String taskText3() {
    switch (activeStep) {
      case 1:
        return 'Practice a 2-minute breathing exercise';

      case 2:
        return 'Practice a 4-minute breathing exercise';

      case 3:
        return 'Practice a 6-minute breathing exercise';

      default:
        return 'Take your first morning jog';
    }
  }

  Widget task1() {
    return Container(
      //  decoration: Boxdecoration(border: Border.all(color: PRIMARY)),child: CheckBoxListTile(
        title: Text(taskText1()),value: checkBox1,onChanged: (value) => setState(() => this.checkBox1 = value),);
  }

  Widget task2() {
    return Container(
      //  decoration: Boxdecoration(border: Border.all(color: PRIMARY)),child: CheckBoxListTile(
        title: Text(taskText2()),value: checkBox2,onChanged: (value) => setState(() => this.checkBox2 = value),);
  }

  Widget task3() {
    return Container(
      //  decoration: Boxdecoration(border: Border.all(color: PRIMARY)),child: CheckBoxListTile(
        title: Text(taskText3()),value: checkBox3,onChanged: (value) => setState(() => this.checkBox3 = value),);
  }
}

Gif 显示复选框当前发生的情况。

问题是：

1. 当我使用提供的示例并添加复选框时，代码是否非常基本？
2. 我是否需要在这里实现一个数据库来记住用户完成的任务？作为应用程序的入门任务，这将是一次性的事情

如有任何建议，我们将不胜感激。

解决方法

您的代码目前没有区分不同页面上相同位置的 2 个复选框。一种可能的解决方案是在您的状态下使用二维数组：

final checkboxPages = [
  [false,false,false],// page 1
  [false,// page 2
  [false,// page 3
];

// this would replace the 3 checkbox bools

这里我们有一个包含 3 个较小列表的列表，每个列表代表一个页面。然后，如果您想读取/写入页面上特定框的状态，您可以：

checkboxPages[1][0] = true;  // second page,first checkbox
var selected = checkboxPages[0][2];  // first page,third checkbox