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
Widget build(BuildContext context, WidgetRef ref) {
final query = MediaQuery.of(context);
if (query.size.width < 540) {
// Single column layout
return _buildScaffold(context, ref, true);
} else {
// Two-column layout
return Row(
children: [
const SizedBox(
width: 240,
child: MainPageDrawer(shouldPop: false),
),
Expanded(
child: _buildScaffold(context, ref, false),
),
],
Widget build(BuildContext context, WidgetRef ref) => LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 540) {
// Single column layout
return _buildScaffold(context, ref, true);
} else {
// Two-column layout
return Row(
children: [
const SizedBox(
width: 240,
child: MainPageDrawer(shouldPop: false),
),
Expanded(
child: _buildScaffold(context, ref, false),
),
],
);
}
},
);
}
}
Scaffold _buildScaffold(BuildContext context, WidgetRef ref, bool hasDrawer) {
final deviceNode = ref.watch(currentDeviceProvider);

View File

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