mirror of https://github.com/flutter/samples.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
392 lines
16 KiB
392 lines
16 KiB
import 'package:ai_recipe_generation/features/prompt/prompt_view_model.dart';
|
|
import 'package:ai_recipe_generation/util/extensions.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:material_symbols_icons/material_symbols_icons.dart';
|
|
import 'package:provider/provider.dart';
|
|
|
|
import '../../theme.dart';
|
|
import '../../util/filter_chip_enums.dart';
|
|
import '../../widgets/filter_chip_selection_input.dart';
|
|
import '../../widgets/highlight_border_on_hover_widget.dart';
|
|
import '../../widgets/marketplace_button_widget.dart';
|
|
import '../recipes/widgets/recipe_fullscreen_dialog.dart';
|
|
import 'widgets/full_prompt_dialog_widget.dart';
|
|
import 'widgets/image_input_widget.dart';
|
|
|
|
const double kAvatarSize = 50;
|
|
const double collapsedHeight = 100;
|
|
const double expandedHeight = 300;
|
|
const double elementPadding = MarketplaceTheme.spacing7;
|
|
|
|
class PromptScreen extends StatelessWidget {
|
|
const PromptScreen({super.key, required this.canScroll});
|
|
|
|
final bool canScroll;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final viewModel = context.watch<PromptViewModel>();
|
|
|
|
return LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
return SingleChildScrollView(
|
|
physics: canScroll
|
|
? const BouncingScrollPhysics()
|
|
: const NeverScrollableScrollPhysics(),
|
|
child: Container(
|
|
padding: constraints.isMobile
|
|
? const EdgeInsets.only(
|
|
left: MarketplaceTheme.spacing7,
|
|
right: MarketplaceTheme.spacing7,
|
|
bottom: MarketplaceTheme.spacing7,
|
|
top: MarketplaceTheme.spacing7,
|
|
)
|
|
: const EdgeInsets.only(
|
|
left: MarketplaceTheme.spacing7,
|
|
right: MarketplaceTheme.spacing7,
|
|
bottom: MarketplaceTheme.spacing1,
|
|
top: MarketplaceTheme.spacing7,
|
|
),
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
border: Border.all(color: MarketplaceTheme.borderColor),
|
|
borderRadius: const BorderRadius.only(
|
|
topLeft: Radius.circular(4),
|
|
topRight: Radius.circular(50),
|
|
bottomRight:
|
|
Radius.circular(MarketplaceTheme.defaultBorderRadius),
|
|
bottomLeft:
|
|
Radius.circular(MarketplaceTheme.defaultBorderRadius),
|
|
),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.all(elementPadding + 10),
|
|
child: Text(
|
|
'Create a recipe:',
|
|
style: MarketplaceTheme.dossierParagraph.copyWith(
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 18,
|
|
),
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.all(
|
|
elementPadding,
|
|
),
|
|
child: SizedBox(
|
|
height: constraints.isMobile ? 130 : 230,
|
|
child: AddImageToPromptWidget(
|
|
height: constraints.isMobile ? 100 : 200,
|
|
width: constraints.isMobile ? 100 : 200,
|
|
),
|
|
),
|
|
),
|
|
if (constraints.isMobile)
|
|
Padding(
|
|
padding: const EdgeInsets.all(elementPadding),
|
|
child: _FilterChipSection(
|
|
label: "I also have these staple ingredients: ",
|
|
child: FilterChipSelectionInput<BasicIngredientsFilter>(
|
|
onChipSelected: (selected) {
|
|
viewModel.addBasicIngredients(
|
|
selected as Set<BasicIngredientsFilter>);
|
|
},
|
|
allValues: BasicIngredientsFilter.values,
|
|
selectedValues:
|
|
viewModel.userPrompt.selectedBasicIngredients,
|
|
),
|
|
),
|
|
),
|
|
if (constraints.isMobile)
|
|
Padding(
|
|
padding: const EdgeInsets.all(elementPadding),
|
|
child: _FilterChipSection(
|
|
label: "I'm in the mood for: ",
|
|
child: FilterChipSelectionInput<CuisineFilter>(
|
|
onChipSelected: (selected) {
|
|
viewModel.addCategoryFilters(
|
|
selected as Set<CuisineFilter>);
|
|
},
|
|
allValues: CuisineFilter.values,
|
|
selectedValues: viewModel.userPrompt.selectedCuisines,
|
|
),
|
|
),
|
|
),
|
|
if (constraints.isMobile)
|
|
Padding(
|
|
padding: const EdgeInsets.all(elementPadding),
|
|
child: _FilterChipSection(
|
|
label: "I have the following dietary restrictions:",
|
|
child:
|
|
FilterChipSelectionInput<DietaryRestrictionsFilter>(
|
|
onChipSelected: (selected) {
|
|
viewModel.addDietaryRestrictionFilter(
|
|
selected as Set<DietaryRestrictionsFilter>);
|
|
},
|
|
allValues: DietaryRestrictionsFilter.values,
|
|
selectedValues:
|
|
viewModel.userPrompt.selectedDietaryRestrictions,
|
|
),
|
|
),
|
|
),
|
|
if (!constraints.isMobile)
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
Expanded(
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(elementPadding),
|
|
child: _FilterChipSection(
|
|
label: "I'm in the mood for: ",
|
|
child: FilterChipSelectionInput<CuisineFilter>(
|
|
onChipSelected: (selected) {
|
|
viewModel.addCategoryFilters(
|
|
selected as Set<CuisineFilter>);
|
|
},
|
|
allValues: CuisineFilter.values,
|
|
selectedValues:
|
|
viewModel.userPrompt.selectedCuisines,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Expanded(
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(elementPadding),
|
|
child: _FilterChipSection(
|
|
label: "I also have these staple ingredients: ",
|
|
child: FilterChipSelectionInput<
|
|
BasicIngredientsFilter>(
|
|
onChipSelected: (selected) {
|
|
viewModel.addBasicIngredients(
|
|
selected as Set<BasicIngredientsFilter>);
|
|
},
|
|
allValues: BasicIngredientsFilter.values,
|
|
selectedValues: viewModel
|
|
.userPrompt.selectedBasicIngredients,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Expanded(
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(elementPadding),
|
|
child: _FilterChipSection(
|
|
label:
|
|
"I have the following dietary restrictions:",
|
|
child: FilterChipSelectionInput<
|
|
DietaryRestrictionsFilter>(
|
|
onChipSelected: (selected) {
|
|
viewModel.addDietaryRestrictionFilter(selected
|
|
as Set<DietaryRestrictionsFilter>);
|
|
},
|
|
allValues: DietaryRestrictionsFilter.values,
|
|
selectedValues: viewModel
|
|
.userPrompt.selectedDietaryRestrictions,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.all(elementPadding),
|
|
child: _TextField(
|
|
controller: viewModel.promptTextController,
|
|
onChanged: (value) {
|
|
viewModel.notify();
|
|
},
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(
|
|
vertical: MarketplaceTheme.spacing4,
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
if (!constraints.isMobile) const Spacer(flex: 1),
|
|
if (!constraints.isMobile)
|
|
Expanded(
|
|
flex: 3,
|
|
child: MarketplaceButton(
|
|
onPressed: viewModel.resetPrompt,
|
|
buttonText: 'Reset prompt',
|
|
icon: Symbols.restart_alt,
|
|
iconColor: Colors.black45,
|
|
buttonBackgroundColor: Colors.transparent,
|
|
hoverColor:
|
|
MarketplaceTheme.secondary.withOpacity(.1),
|
|
),
|
|
),
|
|
const Spacer(flex: 1),
|
|
Expanded(
|
|
flex: constraints.isMobile ? 10 : 3,
|
|
child: MarketplaceButton(
|
|
onPressed: () {
|
|
final promptData = viewModel.buildPrompt();
|
|
showDialog<Null>(
|
|
context: context,
|
|
builder: (context) {
|
|
return FullPromptDialog(
|
|
promptData: promptData,
|
|
);
|
|
},
|
|
);
|
|
},
|
|
buttonText: 'Full prompt',
|
|
icon: Symbols.info_rounded,
|
|
),
|
|
),
|
|
const Spacer(flex: 1),
|
|
Expanded(
|
|
flex: constraints.isMobile ? 10 : 3,
|
|
child: MarketplaceButton(
|
|
onPressed: () async {
|
|
await viewModel.submitPrompt().then((_) async {
|
|
if (!context.mounted) return;
|
|
if (viewModel.recipe != null) {
|
|
bool? shouldSave = await showDialog<bool>(
|
|
context: context,
|
|
barrierDismissible: false,
|
|
builder: (context) => RecipeDialogScreen(
|
|
recipe: viewModel.recipe!,
|
|
actions: [
|
|
MarketplaceButton(
|
|
onPressed: () {
|
|
Navigator.of(context).pop(true);
|
|
},
|
|
buttonText: "Save Recipe",
|
|
icon: Symbols.save,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
if (shouldSave != null && shouldSave) {
|
|
viewModel.saveRecipe();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
buttonText: 'Submit prompt',
|
|
icon: Symbols.send,
|
|
),
|
|
),
|
|
const Spacer(flex: 1),
|
|
],
|
|
),
|
|
),
|
|
if (constraints.isMobile)
|
|
Align(
|
|
alignment: Alignment.center,
|
|
child: MarketplaceButton(
|
|
onPressed: viewModel.resetPrompt,
|
|
buttonText: 'Reset prompt',
|
|
icon: Symbols.restart_alt,
|
|
iconColor: Colors.black45,
|
|
buttonBackgroundColor: Colors.transparent,
|
|
hoverColor: MarketplaceTheme.secondary.withOpacity(.1),
|
|
),
|
|
),
|
|
const SizedBox(height: 200.0),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|
|
|
|
class _FilterChipSection extends StatelessWidget {
|
|
const _FilterChipSection({
|
|
required this.child,
|
|
required this.label,
|
|
});
|
|
|
|
final Widget child;
|
|
final String label;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return HighlightBorderOnHoverWidget(
|
|
borderRadius: BorderRadius.zero,
|
|
child: Container(
|
|
height: 230,
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).splashColor.withOpacity(.1),
|
|
border: Border.all(
|
|
color: MarketplaceTheme.borderColor,
|
|
),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.all(MarketplaceTheme.spacing7),
|
|
child: Text(
|
|
label,
|
|
style: MarketplaceTheme.dossierParagraph,
|
|
),
|
|
),
|
|
Expanded(
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(8.0),
|
|
child: child,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _TextField extends StatelessWidget {
|
|
const _TextField({
|
|
required this.controller,
|
|
this.onChanged,
|
|
});
|
|
|
|
final TextEditingController controller;
|
|
final Null Function(String)? onChanged;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return TextField(
|
|
scrollPadding: const EdgeInsets.only(bottom: 150),
|
|
maxLines: null,
|
|
onChanged: onChanged,
|
|
minLines: 3,
|
|
controller: controller,
|
|
style: WidgetStateTextStyle.resolveWith(
|
|
(states) => MarketplaceTheme.dossierParagraph),
|
|
decoration: InputDecoration(
|
|
fillColor: Theme.of(context).splashColor,
|
|
hintText: "Add additional context...",
|
|
hintStyle: WidgetStateTextStyle.resolveWith(
|
|
(states) => MarketplaceTheme.dossierParagraph,
|
|
),
|
|
enabledBorder: const OutlineInputBorder(
|
|
borderRadius: BorderRadius.zero,
|
|
borderSide: BorderSide(width: 1, color: Colors.black12),
|
|
),
|
|
focusedBorder: const OutlineInputBorder(
|
|
borderRadius: BorderRadius.zero,
|
|
borderSide: BorderSide(width: 1, color: Colors.black45),
|
|
),
|
|
filled: true,
|
|
),
|
|
);
|
|
}
|
|
}
|