How can i remove space around the card in flutter

Issue

In this screenshot there is space around card and i tried many ways but i am not able to remove it, anybody please help.

Here is my code

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

Here is the code which calls this 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();
              },
            ),
          );

Can anyone tell me what mistake i am doing, please i am new to flutter and i am not able to figure it out i tried all the possible methods which i knew

Solution

If you look inside the stepper.dart file you can see:

margin: const EdgeInsets.symmetric(horizontal: 24.0)

So it is the Stepper that assigns the space from left and right, to modify it the only way you have is to create your own version of stepper.

Answered By – Alexandru

Answer Checked By – Katrina (FlutterFixes Volunteer)