如何在颤抖中消除卡周围的空间

时间:2020-06-29 14:18:26

标签: flutter flutter-layout flutter-test flutter-card flutter-padding

在此屏幕快照中,卡周围有空间,我尝试了许多方法,但无法将其删除,请任何人帮助。

enter image description here

这是我的代码

class StepOneView extends StatefulWidget {
  StepOneView({Key key}) : super(key: key);

  @override
  _StepOneViewState createState() => _StepOneViewState();
}

class _StepOneViewState extends State<StepOneView>{
  final textControllerRate = TextEditingController(),
      textControllerVolume = TextEditingController();

  @override
  Widget build(BuildContext context) {

    //var size = MediaQuery.of(context).size.width*1;

    final bloc = BlocProvider.of<StepperBloc>(context);
    return BlocBuilder(
        bloc: bloc,
        builder: (BuildContext context, StepperState state) {
          textControllerRate.text = (state.rate != null) ? state.rate.toString() : textControllerRate.text;
          textControllerVolume.text = (state.volume != null) ? state.volume.toString() : textControllerVolume.text;
          return Container(
            child: Card(
              child: Column(
                children: <Widget>[
                  new TextFormField(
                    controller: textControllerRate,
                    decoration: const InputDecoration(labelText: 'Rate'),
                    keyboardType: TextInputType.number,
                  ),
                  new TextFormField(
                    controller: textControllerVolume,
                    decoration: const InputDecoration(labelText: 'Volume'),
                    keyboardType: TextInputType.number,
                  ),

                  new Padding(
                    padding: EdgeInsets.all(8.0),
                    child: RaisedButton(
                      onPressed: () {
                        bloc.onSaveRate(double.parse(textControllerRate.text), double.parse(textControllerVolume.text));
                        bloc.onContinue();
                      },
                      color: Colors.black,
                      textColor: Colors.white,
                      child: Text('Next'),
                    ),
                  )
                ],
              ),
            ),
          );
        }
    );
  }
}

这是调用此类StepOneView的代码

return Container(
            child: Stepper(
              controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
                return Padding(
                    padding: EdgeInsets.only(top: 8.0),
                    child: SizedBox()
                );
              },

              steps: <Step>[
                Step(
                  title: Text("Step 1"),
                  content: new Wrap(
                    children:<Widget>[
                      StepOneView()
                    ],
                  ),
                  isActive: (state.currentStep == 0 ? true : false),
                  state: (state.currentStep >= 1) ? StepState.complete : StepState.indexed,
                ),
                Step(
                  title: Text("Step 2"),
                  content: new Wrap(
                    children:<Widget>[
                      StepTwoView()
                    ],
                  ),
                  isActive: (state.currentStep == 1 ? true : false),
                  state: (state.currentStep >= 2) ? StepState.complete : StepState.indexed,
                ),
                Step(
                  title: Text("Step 3"),
                  content: new Wrap(
                    children:<Widget>[
                      StepTwoView()
                    ],
                  ),
                  isActive: (state.currentStep == 2 ? true : false),
                  state: (state.currentStep >= 3) ? StepState.complete : StepState.indexed,
                ),
              ],
              currentStep: state.currentStep,
              type: StepperType.horizontal,
              onStepTapped: (step) {
                (step <= state.currentStep) ? bloc.onBack() : bloc.onContinue();
              },
              onStepCancel: () {
                bloc.onBack();
              },
              onStepContinue: () {
                bloc.onContinue();
              },
            ),
          );

任何人都可以告诉我我在做什么错误,请问我是新手,但我无法弄清楚我尝试了所有已知的可能方法

1 个答案:

答案 0 :(得分:2)

如果查看stepper.dart文件,您会看到:

margin: const EdgeInsets.symmetric(horizontal: 24.0)

因此Stepper从左到右分配空间,要对其进行修改,唯一的方法是创建自己的步进器版本。