Skip to content

Commit 96b8c24

Browse files
rayliverifiedrayliverified
committed
Simplify Example
- Remove ConditionalRouteWidget from example. - Create `main_advanced.dart` example.
1 parent a4a74ec commit 96b8c24

File tree

2 files changed

+113
-38
lines changed

2 files changed

+113
-38
lines changed

‎lib/main.dart‎

Lines changed: 25 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import 'package:flutter/material.dart';
22
import 'package:minimal/pages/pages.dart';
3-
import 'package:minimal/routes.dart';
4-
import 'package:navigation_utils/navigation_utils.dart';
53
import 'package:responsive_framework/responsive_framework.dart';
6-
import 'package:minimal/utils/conditional_route_widget.dart';
74

85
void main() {
96
runApp(const MyApp());
@@ -27,44 +24,34 @@ class MyApp extends StatelessWidget {
2724
],
2825
),
2926
initialRoute: '/',
30-
// The following code implements the legacy ResponsiveWrapper AutoScale functionality
31-
// using the new ResponsiveScaledBox. The ResponsiveScaledBox widget preserves
32-
// the legacy ResponsiveWrapper behavior, scaling the UI instead of resizing.
33-
//
34-
// A ConditionalRouteWidget is used to showcase how to disable the AutoScale
35-
// behavior for a page.
3627
onGenerateRoute: (RouteSettings settings) {
37-
// A custom `fadeThrough` route transition animation.
38-
return Routes.fadeThrough(settings, (context) {
39-
// Wrap widgets with another widget based on the route.
40-
// Wrap the page with the ResponsiveScaledBox for desired pages.
41-
return ConditionalRouteWidget(
42-
routesExcluded: const [
43-
TypographyPage.name
44-
], // Excluding a page from AutoScale.
45-
builder: (context, child) => MaxWidthBox(
46-
// A widget that limits the maximum width.
47-
// This is used to create a gutter area on either side of the content.
48-
maxWidth: 1200,
49-
background: Container(color: const Color(0xFFF5F5F5)),
50-
child: ResponsiveScaledBox(
51-
// ResponsiveScaledBox renders its child with a FittedBox set to the `width` value.
52-
// Set the fixed width value based on the active breakpoint.
53-
width: ResponsiveValue<double>(context,
54-
conditionalValues: [
55-
const Condition.equals(name: MOBILE, value: 450),
56-
const Condition.between(
57-
start: 800, end: 1100, value: 800),
58-
const Condition.between(
59-
start: 1000, end: 1200, value: 1000),
60-
// There are no conditions for width over 1200
61-
// because the `maxWidth` is set to 1200 via the MaxWidthBox.
62-
]).value,
63-
child: child!),
64-
),
28+
return MaterialPageRoute(builder: (context) {
29+
// The following code implements the legacy ResponsiveWrapper AutoScale functionality
30+
// using the new ResponsiveScaledBox. The ResponsiveScaledBox widget preserves
31+
// the legacy ResponsiveWrapper behavior, scaling the UI instead of resizing.
32+
//
33+
// **MaxWidthBox** - A widget that limits the maximum width.
34+
// This is used to create a gutter area on either side of the content.
35+
//
36+
// **ResponsiveScaledBox** - A widget that renders its child
37+
// with a FittedBox set to the `width` value. Set the fixed width value
38+
// based on the active breakpoint.
39+
return MaxWidthBox(
40+
maxWidth: 1200,
41+
background: Container(color: const Color(0xFFF5F5F5)),
42+
child: ResponsiveScaledBox(
43+
width: ResponsiveValue<double>(context, conditionalValues: [
44+
const Condition.equals(name: MOBILE, value: 450),
45+
const Condition.between(start: 800, end: 1100, value: 800),
46+
const Condition.between(start: 1000, end: 1200, value: 1000),
47+
// There are no conditions for width over 1200
48+
// because the `maxWidth` is set to 1200 via the MaxWidthBox.
49+
]).value,
6550
child: BouncingScrollWrapper.builder(
6651
context, buildPage(settings.name ?? ''),
67-
dragWithMouse: true));
52+
dragWithMouse: true),
53+
),
54+
);
6855
});
6956
},
7057
debugShowCheckedModeBanner: false,

‎lib/main_advanced.dart‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:minimal/pages/pages.dart';
3+
import 'package:minimal/routes.dart';
4+
import 'package:navigation_utils/navigation_utils.dart';
5+
import 'package:responsive_framework/responsive_framework.dart';
6+
7+
void main() {
8+
runApp(const MyApp());
9+
}
10+
11+
class MyApp extends StatelessWidget {
12+
const MyApp({Key? key}) : super(key: key);
13+
14+
@override
15+
Widget build(BuildContext context) {
16+
return MaterialApp(
17+
// Wrapping the app with a builder method makes breakpoints
18+
// accessible throughout the widget tree.
19+
builder: (context, child) => ResponsiveBreakpoints.builder(
20+
child: child!,
21+
breakpoints: [
22+
const Breakpoint(start: 0, end: 450, name: MOBILE),
23+
const Breakpoint(start: 451, end: 800, name: TABLET),
24+
const Breakpoint(start: 801, end: 1920, name: DESKTOP),
25+
const Breakpoint(start: 1921, end: double.infinity, name: '4K'),
26+
],
27+
),
28+
initialRoute: '/',
29+
// The following code implements the legacy ResponsiveWrapper AutoScale functionality
30+
// using the new ResponsiveScaledBox. The ResponsiveScaledBox widget preserves
31+
// the legacy ResponsiveWrapper behavior, scaling the UI instead of resizing.
32+
//
33+
// A ConditionalRouteWidget is used to showcase how to disable the AutoScale
34+
// behavior for a page.
35+
onGenerateRoute: (RouteSettings settings) {
36+
// A custom `fadeThrough` route transition animation.
37+
return Routes.fadeThrough(settings, (context) {
38+
// Wrap widgets with another widget based on the route.
39+
// Wrap the page with the ResponsiveScaledBox for desired pages.
40+
return ConditionalRouteWidget(
41+
routesExcluded: const [
42+
TypographyPage.name
43+
], // Excluding a page from AutoScale.
44+
builder: (context, child) => MaxWidthBox(
45+
// A widget that limits the maximum width.
46+
// This is used to create a gutter area on either side of the content.
47+
maxWidth: 1200,
48+
background: Container(color: const Color(0xFFF5F5F5)),
49+
child: ResponsiveScaledBox(
50+
// ResponsiveScaledBox renders its child with a FittedBox set to the `width` value.
51+
// Set the fixed width value based on the active breakpoint.
52+
width: ResponsiveValue<double>(context,
53+
conditionalValues: [
54+
const Condition.equals(name: MOBILE, value: 450),
55+
const Condition.between(
56+
start: 800, end: 1100, value: 800),
57+
const Condition.between(
58+
start: 1000, end: 1200, value: 1000),
59+
// There are no conditions for width over 1200
60+
// because the `maxWidth` is set to 1200 via the MaxWidthBox.
61+
]).value,
62+
child: child!),
63+
),
64+
child: BouncingScrollWrapper.builder(
65+
context, buildPage(settings.name ?? ''),
66+
dragWithMouse: true));
67+
});
68+
},
69+
debugShowCheckedModeBanner: false,
70+
);
71+
}
72+
73+
// onGenerateRoute route switcher.
74+
// Navigate using the page name, `Navigator.pushNamed(context, ListPage.name)`.
75+
Widget buildPage(String name) {
76+
switch (name) {
77+
case '/':
78+
case ListPage.name:
79+
return const ListPage();
80+
case PostPage.name:
81+
return const PostPage();
82+
case TypographyPage.name:
83+
return const TypographyPage();
84+
default:
85+
return const SizedBox.shrink();
86+
}
87+
}
88+
}

0 commit comments

Comments
 (0)