Add cancel button, use LayoutBuilder.

* Adds a cancel button to ResponsiveDialog when in dialog mode.
* Use LayoutBuilder instead of MediaQuery.
This commit is contained in:
Dain Nilsson 2022-03-16 09:13:46 +01:00
parent 21d5e76dcc
commit a58e8d8bdf
No known key found for this signature in database
GPG Key ID: F04367096FBA95E8
2 changed files with 58 additions and 49 deletions

View File

@ -36,26 +36,27 @@ class MainPage extends ConsumerWidget {
} }
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) => LayoutBuilder(
final query = MediaQuery.of(context); builder: (context, constraints) {
if (query.size.width < 540) { if (constraints.maxWidth < 540) {
// Single column layout // Single column layout
return _buildScaffold(context, ref, true); return _buildScaffold(context, ref, true);
} else { } else {
// Two-column layout // Two-column layout
return Row( return Row(
children: [ children: [
const SizedBox( const SizedBox(
width: 240, width: 240,
child: MainPageDrawer(shouldPop: false), child: MainPageDrawer(shouldPop: false),
), ),
Expanded( Expanded(
child: _buildScaffold(context, ref, false), child: _buildScaffold(context, ref, false),
), ),
], ],
);
}
},
); );
}
}
Scaffold _buildScaffold(BuildContext context, WidgetRef ref, bool hasDrawer) { Scaffold _buildScaffold(BuildContext context, WidgetRef ref, bool hasDrawer) {
final deviceNode = ref.watch(currentDeviceProvider); final deviceNode = ref.watch(currentDeviceProvider);

View File

@ -3,41 +3,49 @@ import 'package:flutter/material.dart';
class ResponsiveDialog extends StatelessWidget { class ResponsiveDialog extends StatelessWidget {
final Widget? title; final Widget? title;
final Widget child; final Widget child;
final List<Widget>? actions; final List<Widget> actions;
const ResponsiveDialog( const ResponsiveDialog(
{Key? key, required this.child, this.title, this.actions}) {Key? key, required this.child, this.title, this.actions = const []})
: super(key: key); : super(key: key);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) =>
final query = MediaQuery.of(context); LayoutBuilder(builder: ((context, constraints) {
if (query.size.width < 540) { if (constraints.maxWidth < 540) {
// Fullscreen // Fullscreen
return Dialog( return Dialog(
insetPadding: const EdgeInsets.all(0), insetPadding: const EdgeInsets.all(0),
child: Scaffold( child: Scaffold(
appBar: AppBar( appBar: AppBar(
title: title, title: title,
actions: actions, actions: actions,
), ),
body: SingleChildScrollView( body: SingleChildScrollView(
padding: const EdgeInsets.all(18.0), padding: const EdgeInsets.all(18.0),
child: child,
),
));
} else {
// Dialog
return AlertDialog(
insetPadding: EdgeInsets.zero,
title: title,
scrollable: true,
content: SizedBox(
width: 380,
child: child, child: child,
), ),
)); actions: [
} else { TextButton(
// Dialog child: const Text('Cancel'),
return AlertDialog( onPressed: () {
insetPadding: EdgeInsets.zero, Navigator.of(context).pop();
title: title, },
scrollable: true, ),
content: SizedBox( ...actions
width: 380, ],
child: child, );
), }
actions: actions, }));
);
}
}
} }