Skip to content

Commit

Permalink
Merge pull request #3 from rares45/improve-example
Browse files Browse the repository at this point in the history 
New and improved example
  • Loading branch information
@rares45
rares45 authored Nov 3, 2022
2 parents 12d9520 + 61f6424 commit 5da219a
Show file tree
Hide file tree
Showing 12 changed files with 508 additions and 73 deletions.
16 changes: 15 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ Material 3 design that you can use to create your own license page or responsive

The package exposes a `MasterDetailsFlow` widget. You can use the widget inside a Scaffold.


## Usage

Create a new MasterDetailsFlow and provide the MasterItems list. Read more in documentation.
Expand Down Expand Up @@ -49,4 +50,17 @@ Start by creating a new widget and then, inside the widget get the Flow Settings
final MasterDetailsFlowSettings? settings =
MasterDetailsFlowSettings.of(context);
```
The MasterDetailsFlow will provide here a method to goBack if it is in page mode, a bool indicating if it is in page mode and app bar settings, but they can be ignored if wanted. Ensure that if you use app bars inside the details page you set `automaticallyImplyLeading: false` and create a way to go back if `settings.selfPage` is `true`.
The MasterDetailsFlow will provide here a method to goBack if it is in page mode, a bool indicating if it is in page mode and app bar settings, but they can be ignored if wanted. Ensure that if you use app bars inside the details page you set `automaticallyImplyLeading: false` and create a way to go back if `settings.selfPage` is `true`. More details can be found in the example app under `example/lib/pages/custom_details_item.dart`.

## More
In the example app you can find examples of how to create:
* DetailsItem with a centered text
* Custom list
* Demo settings page
* MasterDetailsFlow inside a Future
* Custom DetailsItems
* Custom MasterItem

Also you should read https://pub.dev/documentation/master_detail_flow/latest/

![Screeshot](https://github.com/2-5-perceivers/flutter-master-detail-flow/blob/master/images/s2.png?raw=true)![Screeshot](https://github.com/2-5-perceivers/flutter-master-detail-flow/blob/master/images/s3.png?raw=true)![Screeshot](https://github.com/2-5-perceivers/flutter-master-detail-flow/blob/master/images/s4.png?raw=true)![Screeshot](https://github.com/2-5-perceivers/flutter-master-detail-flow/blob/master/images/s5.png?raw=true)
80 changes: 8 additions & 72 deletions example/lib/main.dart
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import 'package:example/pages/home.dart';
import 'package:flutter/material.dart';
import 'package:master_detail_flow/master_detail_flow.dart';

void main() => runApp(const MyApp());

Expand All @@ -12,82 +12,18 @@ class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
debugShowCheckedModeBanner: false,
theme: ThemeData(
useMaterial3: true,
brightness: Brightness.light,
colorSchemeSeed: Colors.blue,
colorSchemeSeed: Colors.purple,
),
home: Scaffold(
body: MasterDetailsFlow(
title: const Text(_title),
items: [
MasterItemHeader(
child: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Cool example',
style: Theme.of(context).textTheme.headlineMedium,
),
),
),
),
MasterItem(
'Item one',
detailsBuilder: (_) => const DetailsItem(
title: Text(
'Item one details title',
),
),
),
MasterItem(
'Item two',
detailsBuilder: (_) => const DetailsItem(
title: Text(
'Item two details title',
),
children: [
Text('One children'),
],
),
),
MasterItem(
'Advanced item 3',
detailsBuilder: (_) => DetailsItem(
title: const Text(
'Using a custom sliver',
),
slivers: [
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => Text('This is item $index'),
),
),
],
),
),
const MasterItemDivider(),
MasterItem(
'Item 4',
subtitle: 'Haha',
leading: const Icon(Icons.account_tree_rounded),
detailsBuilder: (_) => DetailsItem(
title: const Text(
'Using a custom sliver',
),
actions: [
IconButton(
onPressed: () {},
icon: const Icon(
Icons.help,
),
),
],
),
),
],
),
darkTheme: ThemeData(
useMaterial3: true,
brightness: Brightness.dark,
colorSchemeSeed: Colors.purple,
),
home: const HomePage(),
);
}
}
59 changes: 59 additions & 0 deletions example/lib/pages/custom_details_item.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import 'package:flutter/material.dart';
import 'package:master_detail_flow/master_detail_flow.dart';

/// To create your custom DetailsItem all you need is to get the flow's settings
/// by using `MasterDetailsFlowSettings.of(context)` then you just need to
/// override all the ways to go back, including the app bar ones, so disable
/// implyLeading on all app bars
class CustomDetailsItem extends StatelessWidget {
const CustomDetailsItem({super.key});

@override
Widget build(BuildContext context) {
MasterDetailsFlowSettings? settings = MasterDetailsFlowSettings.of(context);
bool selfPage = settings?.selfPage ?? false;
return WillPopScope(
// WillPopScope overrides the system back button so we move back the flow
onWillPop: () async {
if (settings?.selfPage == true) {
settings!.goBack!();
}
return !(settings?.selfPage ?? false);
},
child: SizedBox.expand(
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(selfPage ? 'This is a page' : 'This is a panel'),
FilledButton.tonalIcon(
onPressed: settings?.goBack,
icon: Icon(Icons.adaptive.arrow_back_rounded),
label: const Text('Go back'),
),
],
),
),
),
);
}
}

class PageCustom extends StatelessWidget {
const PageCustom({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
body: MasterDetailsFlow(
title: const Text('Custom DetailsItem'),
items: [
MasterItem(
'Custom',
detailsBuilder: (context) => const CustomDetailsItem(),
),
],
),
);
}
}
58 changes: 58 additions & 0 deletions example/lib/pages/future.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import 'package:flutter/material.dart';
import 'package:master_detail_flow/master_detail_flow.dart';

class PageFuture extends StatelessWidget {
const PageFuture({super.key});

@override
Widget build(BuildContext context) {
return FutureBuilder(
future: Future.delayed(
const Duration(seconds: 5),
() => [
MasterItem(
'From future 1',
leading: const Icon(Icons.settings_rounded),
detailsBuilder: (context) =>
const DetailsItem(title: Text('')),
),
MasterItem(
'From future 2',
leading: const Icon(Icons.flutter_dash_rounded),
detailsBuilder: (context) =>
const DetailsItem(title: Text('')),
),
]),
builder: (context, snapshot) {
return Scaffold(
body: MasterDetailsFlow(
title: const Text('Future'),
nothingSelectedWidget:
snapshot.connectionState == ConnectionState.done
? null
: Container(), // Used to hide the selection text
items: snapshot.connectionState == ConnectionState.done
? snapshot.data!
: [
const _MasterLoading(),
],
),
);
});
}
}

/// Custom MasterItem
class _MasterLoading extends StatelessWidget implements MasterItemBase {
const _MasterLoading({super.key});

@override
Widget build(BuildContext context) {
return const SizedBox(
height: 200,
child: Center(
child: CircularProgressIndicator(),
),
);
}
}
Loading

0 comments on commit 5da219a

Please sign in to comment.