Flutter: To-do List App (Part 3) - Add Page

Project Structure



Source Code

lib/main.dart

	import 'package:flutter/material.dart';
	import 'package:todoapp/pages/add_event_page.dart';
	import 'package:todoapp/pages/add_task_page.dart';
	import 'package:todoapp/pages/event_page.dart';
	import 'package:todoapp/pages/task_page.dart';
	import 'package:todoapp/widgets/custom_button.dart';
	void main() => runApp(MyApp());
	class MyApp extends StatelessWidget {
	// This widget is the root of your application.
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	debugShowCheckedModeBanner: false,
	title: 'Flutter Demo',
	theme: ThemeData(primarySwatch: Colors.red, fontFamily: "Montserrat"),
	home: MyHomePage(),
	);
	}
	}
	class MyHomePage extends StatefulWidget {
	@override
	_MyHomePageState createState() => _MyHomePageState();
	}
	class _MyHomePageState extends State<MyHomePage> {
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	body: Stack(
	children: <Widget>[
	Container(
	height: 35,
	color: Theme.of(context).accentColor,
	),
	Positioned(
	right: 0,
	child: Text(
	"6",
	style: TextStyle(fontSize: 200, color: Color(0x10000000)),
	),
	),
	_mainContent(context),
	],
	),
	floatingActionButton: FloatingActionButton(
	onPressed: () {
	showDialog(
	barrierDismissible: false,
	context: context,
	builder: (BuildContext context) {
	return Dialog(
	child: AddTaskPage(),
	shape: RoundedRectangleBorder(
	borderRadius: BorderRadius.all(Radius.circular(12))));
	});
	},
	child: Icon(Icons.add),
	),
	floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
	bottomNavigationBar: BottomAppBar(
	shape: CircularNotchedRectangle(),
	child: Row(
	mainAxisAlignment: MainAxisAlignment.spaceBetween,
	children: <Widget>[
	IconButton(
	icon: Icon(Icons.settings),
	onPressed: () {},
	),
	IconButton(
	icon: Icon(Icons.more_vert),
	onPressed: () {},
	)
	],
	),
	),
	// This trailing comma makes auto-formatting nicer for build methods.
	);
	}
	Column _mainContent(BuildContext context) {
	return Column(
	crossAxisAlignment: CrossAxisAlignment.start,
	children: <Widget>[
	SizedBox(height: 60),
	Padding(
	padding: const EdgeInsets.all(24.0),
	child: Text(
	"Monday",
	style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
	),
	),
	Padding(
	padding: const EdgeInsets.all(24.0),
	child: _button(context),
	),
	Expanded(child: EventPage())
	],
	);
	}
	Widget _button(BuildContext context) {
	return Row(
	children: <Widget>[
	Expanded(
	child: CustomButton(
	onPressed: () {},
	buttonText: "Tasks",
	color: Theme.of(context).accentColor,
	textColor: Colors.white,
	)),
	SizedBox(
	width: 32,
	),
	Expanded(
	child: CustomButton(
	onPressed: () {},
	buttonText: "Events",
	color: Colors.white,
	textColor: Theme.of(context).accentColor,
	borderColor: Theme.of(context).accentColor,
	))
	],
	);
	}
	}

view raw main_3.dart hosted with ❤ by GitHub

lib/widgets/custom_button.dart

	import 'package:flutter/material.dart';
	class CustomButton extends StatelessWidget {
	final VoidCallback onPressed;
	final String buttonText;
	final Color color;
	final Color textColor;
	final Color borderColor;
	CustomButton(
	{@required this.onPressed,
	@required this.buttonText,
	this.color,
	this.textColor,
	this.borderColor = Colors.transparent});
	@override
	Widget build(BuildContext context) {
	return MaterialButton(
	onPressed: onPressed,
	shape: RoundedRectangleBorder(
	side: BorderSide(color: borderColor),
	borderRadius: BorderRadius.circular(12)),
	color: color,
	textColor: textColor,
	padding: const EdgeInsets.all(14.0),
	child: Text(buttonText),
	);
	}
	}

view raw custom_button_3.dart hosted with ❤ by GitHub

lib/widgets/custom_textfield.dart

	import 'package:flutter/material.dart';
	class CustomButton extends StatelessWidget {
	final VoidCallback onPressed;
	final String buttonText;
	final Color color;
	final Color textColor;
	final Color borderColor;
	CustomButton(
	{@required this.onPressed,
	@required this.buttonText,
	this.color,
	this.textColor,
	this.borderColor = Colors.transparent});
	@override
	Widget build(BuildContext context) {
	return MaterialButton(
	onPressed: onPressed,
	shape: RoundedRectangleBorder(
	side: BorderSide(color: borderColor),
	borderRadius: BorderRadius.circular(12)),
	color: color,
	textColor: textColor,
	padding: const EdgeInsets.all(14.0),
	child: Text(buttonText),
	);
	}
	}

view raw custom_textfield_3.dart hosted with ❤ by GitHub

lib/pages/add_task_page.dart

	import 'package:flutter/material.dart';
	import 'package:todoapp/widgets/custom_button.dart';
	import 'package:todoapp/widgets/custom_textfield.dart';
	class AddTaskPage extends StatefulWidget {
	@override
	_AddTaskPageState createState() => _AddTaskPageState();
	}
	class _AddTaskPageState extends State<AddTaskPage> {
	@override
	Widget build(BuildContext context) {
	return Padding(
	padding: const EdgeInsets.all(24.0),
	child: Column(
	mainAxisSize: MainAxisSize.min,
	children: <Widget>[
	Center(
	child: Text(
	"Add new task",
	style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
	)),
	SizedBox(
	height: 24,
	),
	CustomTextField(labelText: 'Enter task name'),
	SizedBox(
	height: 24,
	),
	_actionButton(context)
	],
	),
	);
	}
	Widget _actionButton(BuildContext context) {
	return Row(
	mainAxisAlignment: MainAxisAlignment.spaceBetween,
	children: <Widget>[
	CustomButton(
	onPressed: () {
	Navigator.of(context).pop();
	},
	buttonText: "Close",
	),
	CustomButton(
	onPressed: () {},
	buttonText: "Save",
	color: Theme.of(context).accentColor,
	textColor: Colors.white,
	)
	],
	);
	}
	}

view raw add_task_page_3.dart hosted with ❤ by GitHub

lib/pages/add_event_page.dart

	import 'package:flutter/material.dart';
	import 'package:todoapp/widgets/custom_button.dart';
	import 'package:todoapp/widgets/custom_textfield.dart';
	class AddEventPage extends StatefulWidget {
	@override
	_AddEventPageState createState() => _AddEventPageState();
	}
	class _AddEventPageState extends State<AddEventPage> {
	String _selectedDate = 'Pick date';
	String _selectedTime = 'Pick time';
	Future _pickDate() async {
	DateTime datepick = await showDatePicker(
	context: context,
	initialDate: new DateTime.now(),
	firstDate: new DateTime.now().add(Duration(days: -365)),
	lastDate: new DateTime.now().add(Duration(days: 365)));
	if (datepick != null)
	setState(() {
	_selectedDate = datepick.toString();
	});
	}
	Future _pickTime() async {
	TimeOfDay timepick = await showTimePicker(
	context: context, initialTime: new TimeOfDay.now());
	if (timepick != null) {
	setState(() {
	_selectedTime = timepick.toString();
	});
	}
	}
	@override
	Widget build(BuildContext context) {
	return Padding(
	padding: const EdgeInsets.all(24.0),
	child: Column(
	mainAxisSize: MainAxisSize.min,
	children: <Widget>[
	Center(
	child: Text(
	"Add new event",
	style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
	)),
	SizedBox(
	height: 24,
	),
	CustomTextField(labelText: 'Enter event name'),
	SizedBox(height: 12),
	CustomTextField(labelText: 'Enter description'),
	SizedBox(height: 12),
	_dateTimePicker(Icons.date_range, _pickDate, _selectedDate),
	_dateTimePicker(Icons.access_time, _pickTime, _selectedTime),
	SizedBox(
	height: 24,
	),
	_actionButton(context)
	],
	),
	);
	}
	Widget _dateTimePicker(IconData icon, VoidCallback onPressed, String value) {
	return FlatButton(
	padding: EdgeInsets.zero,
	onPressed: onPressed,
	child: Padding(
	padding: const EdgeInsets.only(left: 12.0),
	child: Row(
	children: <Widget>[
	Icon(icon, color: Theme.of(context).accentColor, size: 30),
	SizedBox(
	width: 12,
	),
	Text(
	value,
	style: TextStyle(fontSize: 14),
	)
	],
	),
	),
	);
	}
	Widget _actionButton(BuildContext context) {
	return Row(
	mainAxisAlignment: MainAxisAlignment.spaceBetween,
	children: <Widget>[
	CustomButton(
	onPressed: () {
	Navigator.of(context).pop();
	},
	buttonText: "Close",
	),
	CustomButton(
	onPressed: () {},
	buttonText: "Save",
	color: Theme.of(context).accentColor,
	textColor: Colors.white,
	)
	],
	);
	}
	}

view raw add_event_page_3.dart hosted with ❤ by GitHub