Flutter: To-do List App (Part 1) - Tasks Page

Project Structure



Source Code

pubspec.yaml

	name: todoapp
	description: A new Flutter project.
	# The following defines the version and build number for your application.
	# A version number is three numbers separated by dots, like 1.2.43
	# followed by an optional build number separated by a +.
	# Both the version and the builder number may be overridden in flutter
	# build by specifying --build-name and --build-number, respectively.
	# In Android, build-name is used as versionName while build-number used as versionCode.
	# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
	# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
	# Read more about iOS versioning at
	# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
	version: 1.0.0+1
	environment:
	sdk: ">=2.1.0 <3.0.0"
	dependencies:
	flutter:
	sdk: flutter
	# The following adds the Cupertino Icons font to your application.
	# Use with the CupertinoIcons class for iOS style icons.
	cupertino_icons: ^0.1.2
	dev_dependencies:
	flutter_test:
	sdk: flutter
	# For information on the generic Dart part of this file, see the
	# following page: https://www.dartlang.org/tools/pub/pubspec
	# The following section is specific to Flutter.
	flutter:
	# The following line ensures that the Material Icons font is
	# included with your application, so that you can use the icons in
	# the material Icons class.
	uses-material-design: true
	# To add assets to your application, add an assets section, like this:
	# assets:
	# - images/a_dot_burr.jpeg
	# - images/a_dot_ham.jpeg
	# An image asset can refer to one or more resolution-specific "variants", see
	# https://flutter.dev/assets-and-images/#resolution-aware.
	# For details regarding adding assets from package dependencies, see
	# https://flutter.dev/assets-and-images/#from-packages
	# To add custom fonts to your application, add a fonts section here,
	# in this "flutter" section. Each entry in this list should have a
	# "family" key with the font family name, and a "fonts" key with a
	# list giving the asset and other descriptors for the font. For
	# example:
	fonts:
	- family: Montserrat
	fonts:
	- asset: assets/fonts/Montserrat-Regular.ttf
	# - asset: fonts/Schyler-Italic.ttf
	# style: italic
	# - family: Trajan Pro
	# fonts:
	# - asset: fonts/TrajanPro.ttf
	# - asset: fonts/TrajanPro_Bold.ttf
	# weight: 700
	#
	# For details regarding fonts from package dependencies,
	# see https://flutter.dev/custom-fonts/#from-packages

view raw pubspec.yaml hosted with ❤ by GitHub

lib/main.dart

	import 'package:flutter/material.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),
	),
	_taskUncomplete("Call Tom about appointment"),
	_taskUncomplete("Fix onboarding experience"),
	_taskUncomplete("Edit API documentation"),
	_taskUncomplete("Setup user focus group"),
	Divider(),
	SizedBox(height: 16),
	_taskComplete("Have coffe with Sam"),
	_taskComplete("Meet with sales"),
	],
	);
	}
	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 Padding(
	padding: const EdgeInsets.only(left: 20.0, bottom: 24.0),
	child: Row(
	children: <Widget>[
	Icon(
	Icons.radio_button_checked,
	color: Theme.of(context).accentColor,
	size: 20,
	),
	SizedBox(
	width: 28,
	),
	Text(task)
	],
	),
	);
	}
	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.dart hosted with ❤ by GitHub