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

Commit 3d40d4d

Browse files
rami-arami-a
authored
[Dev Docs] Create time picker docs (#74)
1 parent a83240f commit 3d40d4d

14 files changed

+580
-0
lines changed

‎docs/components/assets/time_pickers/TimePicker_hero.png

73.4 KB
Loading

‎docs/components/assets/time_pickers/TimePicker_types.png

120 KB
Loading

‎docs/components/assets/time_pickers/dial_anatomy.png

77.2 KB
Loading

‎docs/components/assets/time_pickers/input_anatomy.png

44.4 KB
Loading

‎docs/components/assets/time_pickers/time_input_picker_example.png

55.4 KB
Loading

‎docs/components/assets/time_pickers/time_picker_example.png

81.5 KB
Loading

‎docs/components/assets/time_pickers/time_picker_theme_example.png

81.3 KB
Loading

‎docs/components/dartpad/time_pickers/input/dartpad_metadata.yaml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
name: Material Regular Time Input Pickers Demonstration
2+
mode: flutter
3+
files:
4+
- name: main.dart

‎docs/components/dartpad/time_pickers/input/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: 'Time Input Picker Demo',
10+
debugShowCheckedModeBanner: false,
11+
theme: ThemeData(colorScheme: ColorScheme.light()),
12+
home: MyHomePage(),
13+
);
14+
}
15+
}
16+
17+
class MyHomePage extends StatefulWidget {
18+
@override
19+
_MyHomePageState createState() => _MyHomePageState();
20+
}
21+
22+
class _MyHomePageState extends State<MyHomePage> {
23+
TimeOfDay _time = TimeOfDay(hour: 7, minute: 15);
24+
25+
void _selectTime() async {
26+
final TimeOfDay newTime = await showTimePicker(
27+
context: context,
28+
initialTime: _time,
29+
initialEntryMode: TimePickerEntryMode.input,
30+
);
31+
if (newTime != null) {
32+
setState(() {
33+
_time = newTime;
34+
});
35+
}
36+
}
37+
38+
Widget build(BuildContext context) {
39+
return Scaffold(
40+
body: Center(
41+
child: Column(
42+
mainAxisAlignment: MainAxisAlignment.center,
43+
children: [
44+
ElevatedButton(
45+
onPressed: _selectTime,
46+
child: Text('SELECT TIME'),
47+
),
48+
SizedBox(height: 8),
49+
Text(
50+
'Selected time: ${_time.format(context)}',
51+
),
52+
],
53+
),
54+
),
55+
);
56+
}
57+
}

‎docs/components/dartpad/time_pickers/regular/dartpad_metadata.yaml

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

‎docs/components/dartpad/time_pickers/regular/main.dart

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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: 'Time Picker Demo',
10+
debugShowCheckedModeBanner: false,
11+
theme: ThemeData(colorScheme: ColorScheme.light()),
12+
home: MyHomePage(),
13+
);
14+
}
15+
}
16+
17+
class MyHomePage extends StatefulWidget {
18+
@override
19+
_MyHomePageState createState() => _MyHomePageState();
20+
}
21+
22+
class _MyHomePageState extends State<MyHomePage> {
23+
TimeOfDay _time = TimeOfDay(hour: 7, minute: 15);
24+
25+
void _selectTime() async {
26+
final TimeOfDay newTime = await showTimePicker(
27+
context: context,
28+
initialTime: _time,
29+
);
30+
if (newTime != null) {
31+
setState(() {
32+
_time = newTime;
33+
});
34+
}
35+
}
36+
37+
Widget build(BuildContext context) {
38+
return Scaffold(
39+
body: Center(
40+
child: Column(
41+
mainAxisAlignment: MainAxisAlignment.center,
42+
children: [
43+
ElevatedButton(
44+
onPressed: _selectTime,
45+
child: Text('SELECT TIME'),
46+
),
47+
SizedBox(height: 8),
48+
Text(
49+
'Selected time: ${_time.format(context)}',
50+
),
51+
],
52+
),
53+
),
54+
);
55+
}
56+
}

‎docs/components/dartpad/time_pickers/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 Time Pickers with Shrine Theme Demonstration
2+
mode: flutter
3+
files:
4+
- name: main.dart

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

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
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: 'Time Picker Themed Demo',
10+
debugShowCheckedModeBanner: false,
11+
theme: _buildShrineTheme(),
12+
home: MyHomePage(),
13+
);
14+
}
15+
}
16+
17+
class MyHomePage extends StatefulWidget {
18+
@override
19+
_MyHomePageState createState() => _MyHomePageState();
20+
}
21+
22+
class _MyHomePageState extends State<MyHomePage> {
23+
TimeOfDay _time = TimeOfDay(hour: 7, minute: 15);
24+
25+
void _selectTime() async {
26+
final TimeOfDay newTime = await showTimePicker(
27+
context: context,
28+
initialTime: _time,
29+
);
30+
if (newTime != null) {
31+
setState(() {
32+
_time = newTime;
33+
});
34+
}
35+
}
36+
37+
Widget build(BuildContext context) {
38+
return Scaffold(
39+
body: Center(
40+
child: Column(
41+
mainAxisAlignment: MainAxisAlignment.center,
42+
children: [
43+
ElevatedButton(
44+
onPressed: _selectTime,
45+
child: Text('SELECT TIME'),
46+
),
47+
SizedBox(height: 8),
48+
Text(
49+
'Selected time: ${_time.format(context)}',
50+
),
51+
],
52+
),
53+
),
54+
);
55+
}
56+
}
57+
58+
ThemeData _buildShrineTheme() {
59+
final ThemeData base = ThemeData.light();
60+
return base.copyWith(
61+
colorScheme: _shrineColorScheme,
62+
toggleableActiveColor: shrinePink400,
63+
accentColor: shrineBrown900,
64+
primaryColor: shrinePink100,
65+
buttonColor: shrinePink100,
66+
scaffoldBackgroundColor: shrineBackgroundWhite,
67+
cardColor: shrineBackgroundWhite,
68+
textSelectionColor: shrinePink100,
69+
errorColor: shrineErrorRed,
70+
buttonTheme: const ButtonThemeData(
71+
colorScheme: _shrineColorScheme,
72+
textTheme: ButtonTextTheme.normal,
73+
),
74+
primaryIconTheme: _customIconTheme(base.iconTheme),
75+
textTheme: _buildShrineTextTheme(base.textTheme),
76+
primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme),
77+
accentTextTheme: _buildShrineTextTheme(base.accentTextTheme),
78+
iconTheme: _customIconTheme(base.iconTheme),
79+
);
80+
}
81+
82+
IconThemeData _customIconTheme(IconThemeData original) {
83+
return original.copyWith(color: shrineBrown900);
84+
}
85+
86+
TextTheme _buildShrineTextTheme(TextTheme base) {
87+
return base
88+
.copyWith(
89+
caption: base.caption.copyWith(
90+
fontWeight: FontWeight.w400,
91+
fontSize: 14,
92+
letterSpacing: defaultLetterSpacing,
93+
),
94+
button: base.button.copyWith(
95+
fontWeight: FontWeight.w500,
96+
fontSize: 14,
97+
letterSpacing: defaultLetterSpacing,
98+
),
99+
)
100+
.apply(
101+
fontFamily: 'Rubik',
102+
displayColor: shrineBrown900,
103+
bodyColor: shrineBrown900,
104+
);
105+
}
106+
107+
const ColorScheme _shrineColorScheme = ColorScheme(
108+
primary: shrinePink400,
109+
primaryVariant: shrineBrown900,
110+
secondary: shrinePink50,
111+
secondaryVariant: shrineBrown900,
112+
surface: shrineSurfaceWhite,
113+
background: shrineBackgroundWhite,
114+
error: shrineErrorRed,
115+
onPrimary: shrineBrown900,
116+
onSecondary: shrineBrown900,
117+
onSurface: shrineBrown900,
118+
onBackground: shrineBrown900,
119+
onError: shrineSurfaceWhite,
120+
brightness: Brightness.light,
121+
);
122+
123+
const Color shrinePink50 = Color(0xFFFEEAE6);
124+
const Color shrinePink100 = Color(0xFFFEDBD0);
125+
const Color shrinePink300 = Color(0xFFFBB8AC);
126+
const Color shrinePink400 = Color(0xFFEAA4A4);
127+
128+
const Color shrineBrown900 = Color(0xFF442B2D);
129+
const Color shrineBrown600 = Color(0xFF7D4F52);
130+
131+
const Color shrineErrorRed = Color(0xFFC5032B);
132+
133+
const Color shrineSurfaceWhite = Color(0xFFFFFBFA);
134+
const Color shrineBackgroundWhite = Colors.white;
135+
136+
const defaultLetterSpacing = 0.03;
137+

0 commit comments

Comments
 (0)