Flutter: To-do List App (Part 2) - Events Page

Project Structure



Source Code

lib/main.dart

	import 'package:flutter/material.dart';
	import 'package:todoapp/pages/event_page.dart';
	import 'package:todoapp/pages/task_page.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: () {},
	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: MaterialButton(
	onPressed: () {},
	shape: RoundedRectangleBorder(
	borderRadius: BorderRadius.circular(12)),
	color: Theme.of(context).accentColor,
	textColor: Colors.white,
	padding: const EdgeInsets.all(14.0),
	child: Text("Tasks"),
	),
	),
	SizedBox(
	width: 32,
	),
	Expanded(
	child: MaterialButton(
	onPressed: () {},
	shape: RoundedRectangleBorder(
	side: BorderSide(color: Theme.of(context).accentColor),
	borderRadius: BorderRadius.circular(12)),
	color: Theme.of(context).accentColor,
	textColor: Colors.white,
	padding: const EdgeInsets.all(14.0),
	child: Text("Tasks"),
	),
	),
	],
	);
	}
	}

view raw main_2.dart hosted with ❤ by GitHub

lib/pages/task_page.dart

	import 'package:flutter/material.dart';
	class TaskPage extends StatefulWidget {
	@override
	_TaskPageState createState() => _TaskPageState();
	}
	class Task {
	final String task;
	final bool isFinish;
	const Task(this.task, this.isFinish);
	}
	final List<Task> _taskList = [
	new Task("Call Tom about appointment", false),
	new Task("Fix onboarding experience", false),
	new Task("Edit API documentation", false),
	new Task("Setup user focus group", false),
	new Task("Have coffe with Sam", true),
	new Task("Meet with sales", true),
	];
	class _TaskPageState extends State<TaskPage> {
	@override
	Widget build(BuildContext context) {
	return ListView.builder(
	padding: const EdgeInsets.all(0),
	itemCount: _taskList.length,
	itemBuilder: (context, index) {
	return _taskList[index].isFinish
	? _taskComplete(_taskList[index].task)
	: _taskUncomplete(_taskList[index].task);
	},
	);
	}
	Widget _taskUncomplete(String task) {
	return Padding(
	padding: const EdgeInsets.only(left: 20.0, bottom: 24.0),
	child: Row(
	children: <Widget>[
	Icon(
	Icons.radio_button_unchecked,
	color: Theme.of(context).accentColor,
	size: 20,
	),
	SizedBox(
	width: 28,
	),
	Text(task)
	],
	),
	);
	}
	Widget _taskComplete(String task) {
	return Container(
	foregroundDecoration: BoxDecoration(color: Color(0x60FDFDFD)),
	child: Padding(
	padding: const EdgeInsets.only(left: 20.0, top: 24.0),
	child: Row(
	children: <Widget>[
	Icon(
	Icons.radio_button_checked,
	color: Theme.of(context).accentColor,
	size: 20,
	),
	SizedBox(
	width: 28,
	),
	Text(task)
	],
	),
	),
	);
	}
	}

view raw task_page_2.dart hosted with ❤ by GitHub

lib/pages/event_page.dart

	import 'package:flutter/material.dart';
	class EventPage extends StatefulWidget {
	@override
	_EventPageState createState() => _EventPageState();
	}
	class Event {
	final String time;
	final String task;
	final String desc;
	final bool isFinish;
	const Event(this.time, this.task, this.desc, this.isFinish);
	}
	final List<Event> _eventList = [
	new Event("08:00", "Have coffe with Sam", "Personal", true),
	new Event("10:00", "Meet with sales", "Work", true),
	new Event("12:00", "Call Tom about appointment", "Work", false),
	new Event("14:00", "Fix onboarding experience", "Work", false),
	new Event("16:00", "Edit API documentation", "Personal", false),
	new Event("18:00", "Setup user focus group", "Personal", false),
	];
	class _EventPageState extends State<EventPage> {
	@override
	Widget build(BuildContext context) {
	double iconSize = 20;
	return ListView.builder(
	itemCount: _eventList.length,
	padding: const EdgeInsets.all(0),
	itemBuilder: (context, index) {
	return Padding(
	padding: const EdgeInsets.only(left: 24.0, right: 24),
	child: Row(
	children: <Widget>[
	Container(
	decoration: IconDecoration(
	iconSize: iconSize,
	lineWidth: 1,
	firstData: index == 0 ?? true,
	lastData: index == _eventList.length - 1 ?? true),
	child: Container(
	decoration: BoxDecoration(
	borderRadius: BorderRadius.all(Radius.circular(50)),
	boxShadow: [
	BoxShadow(
	offset: Offset(0, 3),
	color: Color(0x20000000),
	blurRadius: 5)
	]),
	child: Icon(
	_eventList[index].isFinish
	? Icons.fiber_manual_record
	: Icons.radio_button_unchecked,
	size: iconSize,
	color: Theme.of(context).accentColor),
	)),
	Container(
	width: 80,
	child: Padding(
	padding: const EdgeInsets.only(left: 8.0),
	child: Text(_eventList[index].time),
	)),
	Expanded(
	child: Padding(
	padding: const EdgeInsets.only(top: 12.0, bottom: 12.0),
	child: Container(
	padding: const EdgeInsets.all(14.0),
	decoration: BoxDecoration(
	color: Colors.white,
	borderRadius: BorderRadius.all(Radius.circular(12)),
	boxShadow: [
	BoxShadow(
	color: Color(0x20000000),
	blurRadius: 5,
	offset: Offset(0, 3))
	]),
	child: Column(
	crossAxisAlignment: CrossAxisAlignment.start,
	children: <Widget>[
	Text(_eventList[index].task),
	SizedBox(
	height: 12,
	),
	Text(_eventList[index].desc)
	],
	),
	),
	),
	)
	],
	),
	);
	},
	);
	}
	}
	class IconDecoration extends Decoration {
	final double iconSize;
	final double lineWidth;
	final bool firstData;
	final bool lastData;
	IconDecoration({
	@required double iconSize,
	@required double lineWidth,
	@required bool firstData,
	@required bool lastData,
	}) : this.iconSize = iconSize,
	this.lineWidth = lineWidth,
	this.firstData = firstData,
	this.lastData = lastData;
	@override
	BoxPainter createBoxPainter([onChanged]) {
	return IconLine(
	iconSize: iconSize,
	lineWidth: lineWidth,
	firstData: firstData,
	lastData: lastData);
	}
	}
	class IconLine extends BoxPainter {
	final double iconSize;
	final bool firstData;
	final bool lastData;
	final Paint paintLine;
	IconLine({
	@required double iconSize,
	@required double lineWidth,
	@required bool firstData,
	@required bool lastData,
	}) : this.iconSize = iconSize,
	this.firstData = firstData,
	this.lastData = lastData,
	paintLine = Paint()
	..color = Colors.red
	..strokeCap = StrokeCap.round
	..strokeWidth = lineWidth
	..style = PaintingStyle.stroke;
	@override
	void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
	final leftOffset = Offset((iconSize / 2) + 24, offset.dy);
	final double iconSpace = iconSize / 1.5;
	final Offset top = configuration.size.topLeft(Offset(leftOffset.dx, 0.0));
	final Offset centerTop = configuration.size
	.centerLeft(Offset(leftOffset.dx, leftOffset.dy - iconSpace));
	final Offset centerBottom = configuration.size
	.centerLeft(Offset(leftOffset.dx, leftOffset.dy + iconSpace));
	final Offset end =
	configuration.size.bottomLeft(Offset(leftOffset.dx, leftOffset.dy * 2));
	if (!firstData) canvas.drawLine(top, centerTop, paintLine);
	if (!lastData) canvas.drawLine(centerBottom, end, paintLine);
	}
	}

view raw event_page_2.dart hosted with ❤ by GitHub