Flutter adding Space between AppBar and body - flutter

Question

Following Problem, I'd like to have Space between the AppBar and the MealFormField.
I tried to Wrap the MealFormField into a Container or Column and then Add some Space, but this is not working.
I Added a Picture of the Screen and draw where the Space between the AppBar and the MealFormField should be added.
Code
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_form_bloc/flutter_form_bloc.dart';
import 'package:intl/intl.dart';
import 'package:mealapp/bloc/auth/auth_bloc.dart';
import 'package:mealapp/bloc/form/add_meal_form_bloc.dart';
import 'package:mealapp/components/loading.dart';
import 'package:mealapp/models/global.dart';
import 'package:mealapp/services/repositories/meal_repository.dart';
import 'package:status_alert/status_alert.dart';
class MealFormScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return BlocProvider(
create: (_) => AddMealFormBloc(
mealRepository: MealRepository(),
authBloc: context.bloc<AuthBloc>(),
),
child: Scaffold(
appBar: AppBar(
title: Text(
'Add Meal',
style: darkTodoTitle.copyWith(fontSize: 24),
),
centerTitle: true,
iconTheme: IconThemeData(color: Colors.black),
elevation: 0,
backgroundColor: Colors.white,
brightness: Brightness.light,
),
body: MealFormFields(),
),
);
}
}
class MealFormFields extends StatelessWidget {
#override
Widget build(BuildContext context) {
final formBloc = context.bloc<AddMealFormBloc>();
return FormBlocListener<AddMealFormBloc, String, String>(
onSuccess: (context, _) {
LoadingDialog.hide();
StatusAlert.show(
context,
duration: Duration(seconds: 2),
title: 'Success',
subtitle: 'Successfully added a meal.',
configuration: IconConfiguration(icon: Icons.done),
);
ExtendedNavigator.rootNavigator.pop();
},
onSubmitting: (context, _) {
LoadingDialog.show(context);
},
child: Padding(
padding: const EdgeInsets.all(24.0),
child: ListView(
// mainAxisAlignment: MainAxisAlignment.center,
// crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Add your new meal",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
const SizedBox(height: 24),
TextFieldBlocBuilder(
textFieldBloc: formBloc.mealNameField,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
),
labelText: 'Enter meal name',
),
),
DateTimeFieldBlocBuilder(
dateTimeFieldBloc: formBloc.mealDateField,
format: DateFormat("dd-MM-yyyy"),
initialDate: DateTime.now(),
firstDate: DateTime.now().add(Duration(days: 0)),
lastDate: DateTime.now().add(Duration(days: 365)),
decoration: InputDecoration(
prefixIcon: Icon(Icons.calendar_today),
),
),
FlatButton(
onPressed: () {
print(formBloc.state.canSubmit);
formBloc.submit();
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
child: Text("Save"),
color: redColor,
textColor: Colors.white,
),
],
),
),
);
}
}

Answer 1

You should wrap your MealFormFields(), with a Padding Widget like so:
class MealFormScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return BlocProvider(
create: (_) => AddMealFormBloc(
mealRepository: MealRepository(),
authBloc: context.bloc<AuthBloc>(),
),
child: Scaffold(
appBar: AppBar(
title: Text(
'Add Meal',
style: darkTodoTitle.copyWith(fontSize: 24),
),
centerTitle: true,
iconTheme: IconThemeData(color: Colors.black),
elevation: 0,
backgroundColor: Colors.white,
brightness: Brightness.light,
),
body: Padding(
// I set the padding here to only the top, you can increase the double (16.0) to suit exactly what you're looking to achieve visually
padding: EdgeInsets.only(top: 16.0),
child: MealFormFields(),
),
),
);
}
}
Hope it works for you.