[英]Flutter adding Space between AppBar and body
出現問題后,我想在 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,
),
],
),
),
);
}
}
你應該用這樣的填充小部件包裝你的 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(),
),
),
);
}
}
希望對你有效。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.