Flutter 颤振增加AppBar和车身之间的空间

下面的问题，我想在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,
            ),
          ],
        ),
      ),
    );
  }
}

import'包：auto_-route/auto_-route.dart'；
进口“包装：颤振/材料.省道”；
导入“包装：颤振形式集团/颤振形式集团.dart”；
导入“包：intl/intl.dart”；
导入“package:mealapp/bloc/auth/auth_bloc.dart”；
导入“package:mealapp/bloc/form/add_mean_form_bloc.dart”；
导入“包装：MEALAP/组件/加载.dart”；
导入“包：mealapp/models/global.dart”；
导入“package:mealapp/services/repositories/mean_repository.dart”；
导入“包：状态\警报/状态\警报.dart”；
类MealFormScreen扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回BlocProvider(
创建：（）=>AddMealFormBloc(
mealRepository:mealRepository（），
authBloc:context.bloc（），
),
孩子：脚手架(
appBar:appBar(
标题：正文(
“加餐”，
样式：暗色调标题。复制（字体大小：24），
),
标题：对，
iconTheme:IconThemeData（颜色：Colors.black），
海拔：0，
背景颜色：Colors.white，
亮度：亮度，亮度，
),
正文：MealFormFields（），
),
);
}
}
类MealFormFields扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
final formBloc=context.bloc（）；
返回表单Bloclistener(
onSuccess:（上下文，30;{
LoadingDialog.hide（）；
StatusAlert.show(
上下文
持续时间：持续时间（秒数：2），
标题:"成功",，
副标题：“成功添加了一顿饭。”，
配置：图标配置（图标：Icons.done），
);
ExtendedNavigator.rootNavigator.pop（）；
},
提交：（上下文）{
LoadingDialog.show（上下文）；
},
孩子：填充(
填充：常数边集全部（24.0），
子：ListView(
//mainAxisAlignment:mainAxisAlignment.center，
//crossAxisAlignment:crossAxisAlignment.start，
儿童：[
正文(
“添加您的新餐”，
样式：TextStyle(
fontWeight:fontWeight.bold，
尺寸：16，
),
),
const SizedBox（高度：24），
TextFieldBlocBuilder(
textFieldBloc:formBloc.mealNameField，
装饰：输入装饰(
边框：大纲输入边框(
边界半径：边界半径。圆形（12），
),
errorBorder:OutlineInputBorder(
borderSide:borderSide（颜色：Colors.red），
),
labelText:“输入餐名”，
),
),
DateTimeFieldBlocBuilder(
dateTimeFieldBloc:formBloc.mealDateField，
格式：日期格式（“dd-MM-yyyy”），
initialDate:DateTime.now（），
firstDate:DateTime.now（）.add（持续时间（天：0）），
lastDate:DateTime.now（）.add（持续时间：365天）），
装饰：输入装饰(
prefixIcon：图标（今天的图标、日历），
),
),
扁平按钮(
已按下：（）{
打印（formBloc.state.canSubmit）；
formBloc.submit（）；
},
形状：圆形矩形边框(
边界半径：边界半径。圆形（12），
),
子项：文本（“保存”），
颜色：红色，
textColor:Colors.white，
),
],
),
),
);
}
}

您应该使用如下填充小部件包装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(),
            ),
          ),
        );
      }
    }

类MealFormScreen扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回BlocProvider(
创建：（）=>AddMealFormBloc(
mealRepository:mealRepository（），
authBloc:context.bloc（），
),
孩子：脚手架(
appBar:appBar(
标题：正文(
“加餐”，
样式：暗色调标题。复制（字体大小：24），
),
标题：对，
iconTheme:IconThemeData（颜色：Colors.black），
海拔：0，
背景颜色：Colors.white，
亮度：亮度，亮度，
),
主体：填充物(
//我将这里的填充设置为仅顶部，您可以增加两倍（16.0），以完全符合您希望在视觉上实现的效果
填充：仅限边缘设置（顶部：16.0），
子项：MealFormFields（），
),
),
);
}
}

---

希望对你有用。

谢谢你的回答，这不是我想要的。如图所示，应用栏和MealFormField之间应该有空间，白色和深白色部分之间也应该有空间。@Tempelriter您想增加应用栏的大小吗？@Prateherussell不，我想要应用栏和MealFormFields之间的空间。如果您在图片上看到AppBar是白色的，另一个是深白色，接近灰色。空格应该在两行之间。我不明白你的意思，你想在AppBar和MealFormField之间添加一个容器吗？