Flutter 在 AppBar 和 body 之间添加 Space

Question

以下问题，我想在 AppBar 和 MealFormField 之间留出空间。

我尝试将 MealFormField 包装到容器或列中，然后添加一些空间，但这不起作用。

我添加了一张屏幕图片并绘制了 AppBar 和 MealFormField 之间应该添加空间的地方。

代码

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

你应该像这样用 Padding Widget 包裹你的 MealFormFields():

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

希望它对你有用。