我怎样才能在颤动中删除卡周围的 space

Question

在此屏幕截图中，卡周围有 space，我尝试了很多方法，但我无法将其删除，请任何人提供帮助。

这是我的代码

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'),
                    ),
                  )
                ],
              ),
            ),
          );
        }
    );
  }
}

这是调用此 class 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();
              },
            ),
          );

任何人都可以告诉我我在做什么错误吗，拜托，我是 flutter 的新手，我无法弄清楚我尝试了所有我知道的可能方法

Answer 1

如果您查看 stepper.dart 文件，您可以看到：

margin: const EdgeInsets.symmetric(horizontal: 24.0)

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

Answer 2

用 Container 小部件包裹 Card 小部件，并使用边距属性和

margin: EdgeInsets.only(left: 10)

或者你可以这样做

margin: EdgeInsets.all(8.0),

我怎样才能在颤动中删除卡周围的 space

How can i remove space around the card in flutter

flutter

flutter-layout

flutter-test

flutter-card

flutter-padding