Skip to content
This repository was archived by the owner on Nov 30, 2023. It is now read-only.

Commit a83240f

Browse files
JoseAlbaJoseAlba
authored
Added menu markdown, dartpads, and images (#73)
* Added menu markdown, dartpads, and images * added images * Fixed issues * Fixed issues
1 parent 366eba7 commit a83240f

13 files changed

+613
-0
lines changed

‎docs/components/assets/menus/dropdown_menu_example.png

16.9 KB
Loading

‎docs/components/assets/menus/dropdown_menu_themed_example.png

13 KB
Loading

‎docs/components/assets/menus/exposed_dropdown_menu_example.png

11.1 KB
Loading

‎docs/components/assets/menus/menu_types_composite.png

221 KB
Loading

‎docs/components/assets/menus/menus-anatomy-composite.png

79.3 KB
Loading

‎docs/components/assets/menus/menus-hero.png

16.5 KB
Loading

‎docs/components/dartpad/menus/dropdown/dartpad_metadata.yaml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
name: Material Dropdown Menu Demo
2+
mode: flutter
3+
files:
4+
- name: main.dart

‎docs/components/dartpad/menus/dropdown/main.dart

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import 'package:flutter/material.dart';
2+
3+
void main() => runApp(MyApp());
4+
5+
class MyApp extends StatelessWidget {
6+
@override
7+
Widget build(BuildContext context) {
8+
return MaterialApp(
9+
title: 'Dropdown Menu Demo',
10+
debugShowCheckedModeBanner: false,
11+
theme: ThemeData(
12+
primaryColor: Colors.purple,
13+
),
14+
home: DropdownMenuDemo(),
15+
);
16+
}
17+
}
18+
19+
class DropdownMenuDemo extends StatelessWidget {
20+
@override
21+
Widget build(BuildContext context) {
22+
return Scaffold(
23+
appBar: AppBar(
24+
title: Text('Dropdown Menu Button'),
25+
actions: [
26+
PopupMenuButton(
27+
icon: Icon(Icons.more_vert),
28+
itemBuilder: (BuildContext context) => <PopupMenuEntry>[
29+
const PopupMenuItem(
30+
child: ListTile(
31+
leading: Icon(Icons.add),
32+
title: Text('Item 1'),
33+
),
34+
),
35+
const PopupMenuItem(
36+
child: ListTile(
37+
leading: Icon(Icons.anchor),
38+
title: Text('Item 2'),
39+
),
40+
),
41+
const PopupMenuItem(
42+
child: ListTile(
43+
leading: Icon(Icons.article),
44+
title: Text('Item 3'),
45+
),
46+
),
47+
const PopupMenuDivider(),
48+
const PopupMenuItem(child: Text('Item A')),
49+
const PopupMenuItem(child: Text('Item B')),
50+
],
51+
),
52+
],
53+
),
54+
body: Center(),
55+
);
56+
}
57+
}

‎docs/components/dartpad/menus/exposed_dropdown/dartpad_metadata.yaml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
name: Material Exposed Dropdown Menu Demo
2+
mode: flutter
3+
files:
4+
- name: main.dart

‎docs/components/dartpad/menus/exposed_dropdown/main.dart

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import 'package:flutter/material.dart';
2+
3+
void main() => runApp(MyApp());
4+
5+
class MyApp extends StatelessWidget {
6+
@override
7+
Widget build(BuildContext context) {
8+
return MaterialApp(
9+
title: 'Exposed Menu Demo',
10+
debugShowCheckedModeBanner: false,
11+
home: ExposedDropdownMenuDemo(),
12+
);
13+
}
14+
}
15+
16+
class ExposedDropdownMenuDemo extends StatefulWidget {
17+
@override
18+
_ExposedDropdownMenuDemoState createState() =>
19+
_ExposedDropdownMenuDemoState();
20+
}
21+
22+
class _ExposedDropdownMenuDemoState extends State<ExposedDropdownMenuDemo> {
23+
String dropdownValue = 'Option 1';
24+
25+
@override
26+
Widget build(BuildContext context) {
27+
return Scaffold(
28+
appBar: AppBar(
29+
title: Text('Exposed Menu Demo'),
30+
),
31+
body: Center(
32+
child: DropdownButton(
33+
value: dropdownValue,
34+
items: <DropdownMenuItem>[
35+
DropdownMenuItem(
36+
value: 'Option 1',
37+
child: Text('Option 1'),
38+
),
39+
DropdownMenuItem(
40+
value: 'Option 2',
41+
child: Text('Option 2'),
42+
),
43+
DropdownMenuItem(
44+
value: 'Option 3',
45+
child: Text('Option 3'),
46+
),
47+
DropdownMenuItem(
48+
value: 'Option 4',
49+
child: Text('Option 4'),
50+
),
51+
DropdownMenuItem(
52+
value: 'Option 5',
53+
child: Text('Option 5'),
54+
),
55+
DropdownMenuItem(
56+
value: 'Option 6',
57+
child: Text('Option 6'),
58+
),
59+
],
60+
onChanged: (value) {
61+
setState(() {
62+
dropdownValue = value;
63+
});
64+
},
65+
),
66+
),
67+
);
68+
}
69+
}

‎docs/components/dartpad/menus/theme/dartpad_metadata.yaml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
name: Material DropDown Themed Demo
2+
mode: flutter
3+
files:
4+
- name: main.dart

‎docs/components/dartpad/menus/theme/main.dart

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import 'package:flutter/material.dart';
2+
3+
void main() => runApp(MyApp());
4+
5+
class MyApp extends StatelessWidget {
6+
@override
7+
Widget build(BuildContext context) {
8+
return MaterialApp(
9+
title: 'Dropdown Menu Themed Demo',
10+
debugShowCheckedModeBanner: false,
11+
home: DropdownMenuDemo(),
12+
theme: _buildShrineTheme(),
13+
);
14+
}
15+
}
16+
17+
class DropdownMenuDemo extends StatelessWidget {
18+
@override
19+
Widget build(BuildContext context) {
20+
return Scaffold(
21+
appBar: AppBar(
22+
title: Text('Dropdown Menu Themed Demo'),
23+
actions: [
24+
PopupMenuButton(
25+
icon: Icon(Icons.more_vert),
26+
itemBuilder: (BuildContext context) => <PopupMenuEntry>[
27+
const PopupMenuItem(
28+
child: ListTile(
29+
leading: Icon(Icons.add),
30+
title: Text('Item 1'),
31+
),
32+
),
33+
const PopupMenuItem(
34+
child: ListTile(
35+
leading: Icon(Icons.anchor),
36+
title: Text('Item 2'),
37+
),
38+
),
39+
const PopupMenuItem(
40+
child: ListTile(
41+
leading: Icon(Icons.article),
42+
title: Text('Item 3'),
43+
),
44+
),
45+
const PopupMenuDivider(),
46+
const PopupMenuItem(child: Text('Item A')),
47+
const PopupMenuItem(child: Text('Item B')),
48+
],
49+
),
50+
],
51+
),
52+
body: Center(),
53+
);
54+
}
55+
}
56+
57+
ThemeData _buildShrineTheme() {
58+
final ThemeData base = ThemeData.light();
59+
return base.copyWith(
60+
colorScheme: _shrineColorScheme,
61+
accentColor: shrineBrown900,
62+
primaryColor: shrinePink100,
63+
buttonColor: shrinePink100,
64+
scaffoldBackgroundColor: shrineBackgroundWhite,
65+
cardColor: shrineBackgroundWhite,
66+
textSelectionColor: shrinePink100,
67+
errorColor: shrineErrorRed,
68+
buttonTheme: const ButtonThemeData(
69+
colorScheme: _shrineColorScheme,
70+
textTheme: ButtonTextTheme.normal,
71+
),
72+
primaryIconTheme: _customIconTheme(base.iconTheme),
73+
textTheme: _buildShrineTextTheme(base.textTheme),
74+
primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme),
75+
accentTextTheme: _buildShrineTextTheme(base.accentTextTheme),
76+
iconTheme: _customIconTheme(base.iconTheme),
77+
);
78+
}
79+
80+
IconThemeData _customIconTheme(IconThemeData original) {
81+
return original.copyWith(color: shrineBrown900);
82+
}
83+
84+
TextTheme _buildShrineTextTheme(TextTheme base) {
85+
return base
86+
.copyWith(
87+
caption: base.caption.copyWith(
88+
fontWeight: FontWeight.w400,
89+
fontSize: 14,
90+
letterSpacing: defaultLetterSpacing,
91+
),
92+
button: base.button.copyWith(
93+
fontWeight: FontWeight.w500,
94+
fontSize: 14,
95+
letterSpacing: defaultLetterSpacing,
96+
),
97+
)
98+
.apply(
99+
fontFamily: 'Rubik',
100+
displayColor: shrineBrown900,
101+
bodyColor: shrineBrown900,
102+
);
103+
}
104+
105+
const ColorScheme _shrineColorScheme = ColorScheme(
106+
primary: shrinePink100,
107+
primaryVariant: shrineBrown900,
108+
secondary: shrinePink50,
109+
secondaryVariant: shrineBrown900,
110+
surface: shrineSurfaceWhite,
111+
background: shrineBackgroundWhite,
112+
error: shrineErrorRed,
113+
onPrimary: shrineBrown900,
114+
onSecondary: shrineBrown900,
115+
onSurface: shrineBrown900,
116+
onBackground: shrineBrown900,
117+
onError: shrineSurfaceWhite,
118+
brightness: Brightness.light,
119+
);
120+
121+
const Color shrinePink50 = Color(0xFFFEEAE6);
122+
const Color shrinePink100 = Color(0xFFFEDBD0);
123+
const Color shrinePink300 = Color(0xFFFBB8AC);
124+
const Color shrinePink400 = Color(0xFFEAA4A4);
125+
126+
const Color shrineBrown900 = Color(0xFF442B2D);
127+
const Color shrineBrown600 = Color(0xFF7D4F52);
128+
129+
const Color shrineErrorRed = Color(0xFFC5032B);
130+
131+
const Color shrineSurfaceWhite = Color(0xFFFFFBFA);
132+
const Color shrineBackgroundWhite = Colors.white;
133+
134+
const defaultLetterSpacing = 0.03;

0 commit comments

Comments
 (0)