Flutter Widget | 29 | TimePicker, Clock | TimeOfDay, showTimePicker, Directionality

Here is the video tutorial

Code

main.dart

import 'package:flutter/material.dart'; void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
// primarySwatch: Colors.red,
primaryColor: Color(0xFFC41A3B),
primaryColorLight: Color(0xFFFBE0E6),
accentColor: Color(0xFF1B1F32),
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
const MaterialColor _buttonTextColor = MaterialColor(0xFFC41A3B, <int, Color>{
50: Color(0xFFC41A3B),
100: Color(0xFFC41A3B),
200: Color(0xFFC41A3B),
300: Color(0xFFC41A3B),
400: Color(0xFFC41A3B),
500: Color(0xFFC41A3B),
600: Color(0xFFC41A3B),
700: Color(0xFFC41A3B),
800: Color(0xFFC41A3B),
900: Color(0xFFC41A3B),
});
class _MyHomePageState extends State<MyHomePage> {
String title = 'Time Picker';
TimeOfDay _time;
@override
void initState() {
super.initState();
_time = TimeOfDay.now();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
centerTitle: true,
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: ListTile(
title: Text('Time : ${_time.hour}:${_time.minute}'),
trailing: Icon(Icons.timer),
onTap: _pickTime,
),
),
),
);
}
_pickTime() async {
TimeOfDay time = await showTimePicker(
context: context,
initialTime: _time,
builder: (BuildContext context, Widget child) {
return Theme(
data: ThemeData(
primaryColor: Color(0xFFC41A3B),
accentColor: Color(0xFFC41A3B),
primarySwatch: _buttonTextColor,
),
child: MediaQuery(
data:
MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false),
child: Directionality(
textDirection: TextDirection.ltr,
child: child,
),
),
);
});
if (time != null)
setState(() {
_time = time;
});
}
}