Skip to content

Commit 7c00b1b

Browse files
boring_to_beautiful: Inline adaptive packages (#2321)
Fixes flutter/flutter#170021 by inlining discontinued `adaptive` packages. ## Pre-launch Checklist - [x] I read the [Effective Dart: Style] _recently_, and have followed its advice. - [x] I signed the [CLA]. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-devrel channel on [Discord]. <!-- Links --> [Effective Dart: Style]: https://dart.dev/guides/language/effective-dart/style [CLA]: https://cla.developers.google.com/ [Discord]: https://github.com/flutter/flutter/blob/master/docs/contributing/Chat.md
1 parent 797a3a3 commit 7c00b1b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+6165
-36
lines changed

boring_to_beautiful/codelab_rebuild.yaml

Lines changed: 701 additions & 4 deletions
Large diffs are not rendered by default.

boring_to_beautiful/final/lib/src/features/home/view/home_screen.dart

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
// Use of this source code is governed by a BSD-style license that can be
33
// found in the LICENSE file.
44

5-
import 'package:adaptive_components/adaptive_components.dart';
65
import 'package:flutter/material.dart';
76

87
import '../../../shared/classes/classes.dart';
98
import '../../../shared/extensions.dart';
109
import '../../../shared/providers/providers.dart';
1110
import '../../../shared/views/views.dart';
11+
import '../../../utils/adaptive_components.dart';
1212
import '../../playlists/view/playlist_songs.dart';
1313
import 'view.dart';
1414

Lines changed: 281 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,281 @@
1+
// Copyright 2020, the Flutter project authors. Please see the AUTHORS file
2+
// for details. All rights reserved. Use of this source code is governed by a
3+
// BSD-style license that can be found in the LICENSE file.
4+
import 'package:flutter/material.dart';
5+
6+
/// Adaptive Window in Material has five different window sizes. Each window size
7+
/// represents a range of devices.
8+
///
9+
/// Extra small represents phones and small tablets in portrait view.
10+
/// Small represents tablets in portrait view and phones in landscape view.
11+
/// Medium represents large tablets in landscape view.
12+
/// Large represents computer screens.
13+
/// Extra large represents large computer screens.
14+
///
15+
/// https://material.io/design/layout/responsive-layout-grid.html#breakpoints
16+
class AdaptiveWindowType {
17+
const AdaptiveWindowType._({
18+
required this.name,
19+
required this.relativeSize,
20+
required this.widthRangeValues,
21+
required this.heightLandscapeRangeValues,
22+
required this.heightPortraitRangeValues,
23+
});
24+
25+
/// Name based on the [AdaptiveWindowType].
26+
///
27+
/// Can be: xsmall, small, medium, large or xlarge
28+
final String name;
29+
30+
/// Used to set custom comparison operators for the [AdaptiveWindowType] enum.
31+
final int relativeSize;
32+
33+
/// Valid range of width for this window type.
34+
final RangeValues widthRangeValues;
35+
36+
/// Valid range of height for this window type on landscape mode.
37+
final RangeValues heightLandscapeRangeValues;
38+
39+
/// Valid range of height for this window type on portrait mode.
40+
final RangeValues heightPortraitRangeValues;
41+
42+
static const AdaptiveWindowType xsmall = AdaptiveWindowType._(
43+
name: 'xsmall',
44+
relativeSize: 0,
45+
widthRangeValues: RangeValues(0, 599),
46+
heightLandscapeRangeValues: RangeValues(0, 359),
47+
heightPortraitRangeValues: RangeValues(0, 959),
48+
);
49+
50+
static const AdaptiveWindowType small = AdaptiveWindowType._(
51+
name: 'small',
52+
relativeSize: 1,
53+
widthRangeValues: RangeValues(600, 1023),
54+
heightLandscapeRangeValues: RangeValues(360, 719),
55+
heightPortraitRangeValues: RangeValues(360, 1599),
56+
);
57+
58+
static const AdaptiveWindowType medium = AdaptiveWindowType._(
59+
name: 'medium',
60+
relativeSize: 2,
61+
widthRangeValues: RangeValues(1024, 1439),
62+
heightLandscapeRangeValues: RangeValues(720, 959),
63+
heightPortraitRangeValues: RangeValues(720, 1919),
64+
);
65+
66+
static const AdaptiveWindowType large = AdaptiveWindowType._(
67+
name: 'large',
68+
relativeSize: 3,
69+
widthRangeValues: RangeValues(1440, 1919),
70+
heightLandscapeRangeValues: RangeValues(960, 1279),
71+
heightPortraitRangeValues: RangeValues(1920, double.infinity),
72+
);
73+
74+
static const AdaptiveWindowType xlarge = AdaptiveWindowType._(
75+
name: 'xlarge',
76+
relativeSize: 4,
77+
widthRangeValues: RangeValues(1920, double.infinity),
78+
heightLandscapeRangeValues: RangeValues(1280, double.infinity),
79+
heightPortraitRangeValues: RangeValues(1920, double.infinity),
80+
);
81+
82+
bool operator <=(AdaptiveWindowType other) =>
83+
relativeSize <= other.relativeSize;
84+
85+
bool operator <(AdaptiveWindowType other) =>
86+
relativeSize < other.relativeSize;
87+
88+
bool operator >=(AdaptiveWindowType other) =>
89+
relativeSize >= other.relativeSize;
90+
91+
bool operator >(AdaptiveWindowType other) =>
92+
relativeSize > other.relativeSize;
93+
}
94+
95+
/// This class represents the Material breakpoint system entry.
96+
/// https://material.io/design/layout/responsive-layout-grid.html#breakpoints
97+
class BreakpointSystemEntry {
98+
const BreakpointSystemEntry({
99+
required this.range,
100+
this.portrait,
101+
this.landscape,
102+
required this.adaptiveWindowType,
103+
required this.columns,
104+
required this.margin,
105+
required this.gutter,
106+
});
107+
108+
/// The breakpoint range values represents a width range.
109+
final RangeValues range;
110+
111+
/// Type of device which uses this breakpoint range in portrait view.
112+
final String? portrait;
113+
114+
/// Type of device which uses this breakpoint range in landscape view.
115+
final String? landscape;
116+
117+
/// Material generalizes the device size into five different windows: extra
118+
/// small, small, medium, large, and extra large.
119+
///
120+
/// The adaptive window represents a set of similar devices. For example, if
121+
/// you want to create an adaptive layout for phones and small tablets you
122+
/// would check if your window width is within the range of xsmall and s. If your
123+
/// user has a bigger window size than you would create a different layout for
124+
/// larger screens.
125+
final AdaptiveWindowType adaptiveWindowType;
126+
127+
/// The number of columns in this breakpoint system entry.
128+
/// https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins
129+
final int columns;
130+
131+
/// The size of margins in pixels in this breakpoint system entry.
132+
/// Typically the same as gutters.
133+
/// https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins
134+
final double margin;
135+
136+
/// The size of gutters in pixels in this breakpoint system entry. Typically
137+
/// the same as margins.
138+
///
139+
/// Gutters represents the space between the columns.
140+
///
141+
/// https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins
142+
final double gutter;
143+
}
144+
145+
/// This list represents the material breakpoint system.
146+
/// https://material.io/design/layout/responsive-layout-grid.html#breakpoints
147+
///
148+
/// This list is in sequential order.
149+
const List<BreakpointSystemEntry> breakpointSystem = [
150+
BreakpointSystemEntry(
151+
range: RangeValues(0, 359),
152+
portrait: 'small handset',
153+
adaptiveWindowType: AdaptiveWindowType.xsmall,
154+
columns: 4,
155+
margin: 16.0,
156+
gutter: 16.0,
157+
),
158+
BreakpointSystemEntry(
159+
range: RangeValues(360, 399),
160+
portrait: 'medium handset',
161+
adaptiveWindowType: AdaptiveWindowType.xsmall,
162+
columns: 4,
163+
margin: 16.0,
164+
gutter: 16.0,
165+
),
166+
BreakpointSystemEntry(
167+
range: RangeValues(400, 479),
168+
portrait: 'large handset',
169+
adaptiveWindowType: AdaptiveWindowType.xsmall,
170+
columns: 4,
171+
margin: 16.0,
172+
gutter: 16.0,
173+
),
174+
BreakpointSystemEntry(
175+
range: RangeValues(480, 599),
176+
portrait: 'large handset',
177+
landscape: 'small handset',
178+
adaptiveWindowType: AdaptiveWindowType.xsmall,
179+
columns: 4,
180+
margin: 16.0,
181+
gutter: 16.0,
182+
),
183+
BreakpointSystemEntry(
184+
range: RangeValues(600, 719),
185+
portrait: 'small tablet',
186+
landscape: 'medium handset',
187+
adaptiveWindowType: AdaptiveWindowType.small,
188+
columns: 8,
189+
margin: 16.0,
190+
gutter: 16.0,
191+
),
192+
BreakpointSystemEntry(
193+
range: RangeValues(720, 839),
194+
portrait: 'large tablet',
195+
landscape: 'large handset',
196+
adaptiveWindowType: AdaptiveWindowType.small,
197+
columns: 8,
198+
margin: 24.0,
199+
gutter: 24.0,
200+
),
201+
BreakpointSystemEntry(
202+
range: RangeValues(840, 959),
203+
portrait: 'large tablet',
204+
landscape: 'large handset',
205+
adaptiveWindowType: AdaptiveWindowType.small,
206+
columns: 12,
207+
margin: 24.0,
208+
gutter: 24.0,
209+
),
210+
BreakpointSystemEntry(
211+
range: RangeValues(960, 1023),
212+
landscape: 'small tablet',
213+
adaptiveWindowType: AdaptiveWindowType.small,
214+
columns: 12,
215+
margin: 24.0,
216+
gutter: 24.0,
217+
),
218+
BreakpointSystemEntry(
219+
range: RangeValues(1024, 1279),
220+
landscape: 'large tablet',
221+
adaptiveWindowType: AdaptiveWindowType.medium,
222+
columns: 12,
223+
margin: 24.0,
224+
gutter: 24.0,
225+
),
226+
BreakpointSystemEntry(
227+
range: RangeValues(1280, 1439),
228+
landscape: 'large tablet',
229+
adaptiveWindowType: AdaptiveWindowType.medium,
230+
columns: 12,
231+
margin: 24.0,
232+
gutter: 24.0,
233+
),
234+
BreakpointSystemEntry(
235+
range: RangeValues(1440, 1599),
236+
portrait: 'small handset',
237+
adaptiveWindowType: AdaptiveWindowType.large,
238+
columns: 12,
239+
margin: 24.0,
240+
gutter: 24.0,
241+
),
242+
BreakpointSystemEntry(
243+
range: RangeValues(1600, 1919),
244+
portrait: 'small handset',
245+
adaptiveWindowType: AdaptiveWindowType.large,
246+
columns: 12,
247+
margin: 24.0,
248+
gutter: 24.0,
249+
),
250+
BreakpointSystemEntry(
251+
range: RangeValues(1920, double.infinity),
252+
portrait: 'small handset',
253+
adaptiveWindowType: AdaptiveWindowType.xlarge,
254+
columns: 12,
255+
margin: 24.0,
256+
gutter: 24.0,
257+
),
258+
];
259+
260+
/// Returns the [AdaptiveWindowType] to the user.
261+
///
262+
/// This is useful when the user wants to compare the MediaQuery to the current
263+
/// window size.
264+
AdaptiveWindowType getWindowType(BuildContext context) {
265+
return getBreakpointEntry(context).adaptiveWindowType;
266+
}
267+
268+
/// Returns the [BreakpointSystemEntry] to the user.
269+
///
270+
/// Typically the developer will use the getWindowType function. Using this
271+
/// function gives the developer access to the specific breakpoint entry and
272+
/// it's variables.
273+
BreakpointSystemEntry getBreakpointEntry(BuildContext context) {
274+
double width = MediaQuery.sizeOf(context).width;
275+
for (BreakpointSystemEntry entry in breakpointSystem) {
276+
if (entry.range.start <= width && width < entry.range.end + 1) {
277+
return entry;
278+
}
279+
}
280+
throw AssertionError('Something unexpected happened');
281+
}

0 commit comments

Comments
 (0)