Starter/samples
1
0
Fork 0
mirror of https://github.com/flutter/samples.git synced 2025-11-10 23:08:59 +00:00
Code Issues Releases Wiki Activity

Update M3 demo app layout on small screen (#1558)

Browse Source
This commit is contained in:
Qun Cheng
2023-01-12 12:32:10 -08:00
committed by GitHub
parent 4f059e686e
commit bea2ef6c66
2 changed files with 92 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
experimental/material_3_demo/lib/component_screen.dart
View File

@@ -281,32 +281,82 @@ class FloatingActionButtons extends StatelessWidget {
label: 'Floating action buttons', label: 'Floating action buttons',
tooltipMessage: tooltipMessage:
'Floating action buttons include: \nFloatingActionButton.small, FloatingActionButton, FloatingActionButton.extended, and FloatingActionButton.large', 'Floating action buttons include: \nFloatingActionButton.small, FloatingActionButton, FloatingActionButton.extended, and FloatingActionButton.large',
child: Wrap( child: LayoutBuilder(builder: (context, constraints) {
alignment: WrapAlignment.spaceEvenly, double screenWidth = MediaQuery.of(context).size.width;
crossAxisAlignment: WrapCrossAlignment.center, if (screenWidth < 375.0) {
children: [ return Column(
FloatingActionButton.small( children: [
onPressed: () {}, Row(
child: const Icon(Icons.add), mainAxisAlignment: MainAxisAlignment.spaceAround,
), children: [
rowDivider, Expanded(
FloatingActionButton( child: Center(
onPressed: () {}, child: FloatingActionButton.small(
child: const Icon(Icons.add), onPressed: () {},
), child: const Icon(Icons.add),
rowDivider, ),
FloatingActionButton.extended( ),
onPressed: () {}, ),
icon: const Icon(Icons.add), Expanded(
label: const Text('Create'), child: Center(
), child: FloatingActionButton.extended(
rowDivider, onPressed: () {},
FloatingActionButton.large( icon: const Icon(Icons.add),
onPressed: () {}, label: const Text('Create'),
child: const Icon(Icons.add), ),
), ),
], ),
), ],
),
colDivider,
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Center(
child: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
),
),
Expanded(
child: Center(
child: FloatingActionButton.large(
onPressed: () {},
child: const Icon(Icons.add),
),
),
),
],
)
],
);
} else {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
FloatingActionButton.small(
onPressed: () {},
child: const Icon(Icons.add),
),
FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
FloatingActionButton.extended(
onPressed: () {},
icon: const Icon(Icons.add),
label: const Text('Create'),
),
FloatingActionButton.large(
onPressed: () {},
child: const Icon(Icons.add),
),
],
);
}
}),
); );
} }
} }
@@ -441,7 +491,7 @@ class TextFields extends StatelessWidget {
children: const [ children: const [
Flexible( Flexible(
child: SizedBox( child: SizedBox(
width: 180, width: 200,
child: TextField( child: TextField(
decoration: InputDecoration( decoration: InputDecoration(
prefixIcon: Icon(Icons.search), prefixIcon: Icon(Icons.search),
@@ -455,9 +505,10 @@ class TextFields extends StatelessWidget {
), ),
), ),
), ),
SizedBox(width: 10),
Flexible( Flexible(
child: SizedBox( child: SizedBox(
width: 180, width: 200,
child: TextField( child: TextField(
enabled: false, enabled: false,
decoration: InputDecoration( decoration: InputDecoration(
@@ -494,7 +545,7 @@ class TextFields extends StatelessWidget {
children: const [ children: const [
Flexible( Flexible(
child: SizedBox( child: SizedBox(
width: 180, width: 200,
child: TextField( child: TextField(
decoration: InputDecoration( decoration: InputDecoration(
prefixIcon: Icon(Icons.search), prefixIcon: Icon(Icons.search),
@@ -509,9 +560,10 @@ class TextFields extends StatelessWidget {
), ),
), ),
), ),
SizedBox(width: 10),
Flexible( Flexible(
child: SizedBox( child: SizedBox(
width: 180, width: 200,
child: TextField( child: TextField(
enabled: false, enabled: false,
decoration: InputDecoration( decoration: InputDecoration(
@@ -1191,8 +1243,7 @@ class Chips extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[ children: <Widget>[
Wrap( Wrap(
alignment: WrapAlignment.spaceBetween, alignment: WrapAlignment.spaceAround,
runSpacing: 5,
children: <Widget>[ children: <Widget>[
ActionChip( ActionChip(
label: const Text('Assist'), label: const Text('Assist'),
@@ -1210,33 +1261,26 @@ class Chips extends StatelessWidget {
), ),
colDivider, colDivider,
Wrap( Wrap(
alignment: WrapAlignment.spaceBetween, alignment: WrapAlignment.spaceAround,
runSpacing: 5,
children: <Widget>[ children: <Widget>[
FilterChip( FilterChip(
label: const Text('Filter'), label: const Text('Filter'),
onSelected: (isSelected) {}, onSelected: (isSelected) {},
), ),
FilterChip( FilterChip(
label: const Text('OK'), label: const Text('Selected'),
selected: true, selected: true,
onSelected: (isSelected) {}, onSelected: (isSelected) {},
), ),
const FilterChip( const FilterChip(
label: Text('Disabled'), label: Text('Disabled'),
selected: true,
onSelected: null, onSelected: null,
), ),
const FilterChip(
label: Text('Disabled'),
onSelected: null,
)
], ],
), ),
colDivider, colDivider,
Wrap( Wrap(
alignment: WrapAlignment.spaceBetween, alignment: WrapAlignment.spaceAround,
runSpacing: 5,
children: <Widget>[ children: <Widget>[
InputChip( InputChip(
label: const Text('Input'), label: const Text('Input'),
@@ -1260,8 +1304,7 @@ class Chips extends StatelessWidget {
), ),
colDivider, colDivider,
Wrap( Wrap(
alignment: WrapAlignment.spaceBetween, alignment: WrapAlignment.spaceAround,
runSpacing: 5,
children: <Widget>[ children: <Widget>[
ActionChip( ActionChip(
label: const Text('Suggestion'), label: const Text('Suggestion'),
@@ -1880,6 +1923,7 @@ class _SlidersState extends State<Sliders> {
}); });
}, },
), ),
const SizedBox(height: 20),
Slider( Slider(
max: 100, max: 100,
divisions: 5, divisions: 5,
@@ -1939,7 +1983,8 @@ class ComponentDecoration extends StatelessWidget {
borderRadius: const BorderRadius.all(Radius.circular(12)), borderRadius: const BorderRadius.all(Radius.circular(12)),
), ),
child: Padding( child: Padding(
padding: const EdgeInsets.all(20.0), padding: const EdgeInsets.symmetric(
horizontal: 5.0, vertical: 20.0),
child: child, child: child,
), ),
), ),
@@ -1965,7 +2010,7 @@ class ComponentGroupDecoration extends StatelessWidget {
elevation: 0, elevation: 0,
color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.3), color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.3),
child: Padding( child: Padding(
padding: const EdgeInsets.all(20.0), padding: const EdgeInsets.symmetric(vertical: 20.0),
child: Center( child: Center(
child: Column( child: Column(
children: [ children: [

2
experimental/material_3_demo/test/component_screen_test.dart
View File

@@ -40,7 +40,7 @@ void main() {
// Chips // Chips
expect(find.byType(ActionChip), expect(find.byType(ActionChip),
findsNWidgets(7)); // includes Assist and Suggestion chip. findsNWidgets(7)); // includes Assist and Suggestion chip.
expect(find.byType(FilterChip), findsNWidgets(4)); expect(find.byType(FilterChip), findsNWidgets(3));
expect(find.byType(InputChip), findsNWidgets(4)); expect(find.byType(InputChip), findsNWidgets(4));
// Cards // Cards