Flutter Todo Application: Best Themes to Enhance UX
Discover stunning themes for your Flutter Todo Application. Boost user experience and style your app effortlessly with our top theme selections!
Published March 22, 2020
This Example will show the Different ToDo App Themes
Theme 1
import 'package:flutter/material.dart';
final List<String> weekDays = ["S", "M", "T", "W", "T", "F", "S"];
final List<int> dates = [16, 17, 18, 19, 20, 21, 22];
class TodoTwoPage extends StatelessWidget {
static final String path = "lib/src/pages/todo/todo2.dart";
final int selected = 6;
final TextStyle selectedText = TextStyle(
color: Colors.deepOrange,
fontWeight: FontWeight.bold,
);
final TextStyle daysText = TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey.shade800,
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
brightness: Brightness.light,
iconTheme: IconThemeData(color: Colors.black),
title: Text('My Week'),
backgroundColor: Colors.white,
elevation: 0,
),
body: HeaderWidget(
header: Container(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 16.0),
child: Text(
"March".toUpperCase(),
style: TextStyle(
color: Colors.grey.shade700,
fontWeight: FontWeight.bold,
fontSize: 16.0,
letterSpacing: 2.0),
),
),
Row(
children: weekDays.map((w) {
return Expanded(
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: weekDays.indexOf(w) == selected
? Colors.orange.shade100
: Colors.transparent,
borderRadius: BorderRadius.vertical(
top: Radius.circular(30.0))),
padding: const EdgeInsets.only(top: 20, bottom: 8.0),
child: Text(
w,
style: weekDays.indexOf(w) == selected
? selectedText
: daysText,
),
),
);
}).toList(),
),
Row(
children: dates.map((d) {
return Expanded(
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: dates.indexOf(d) == selected
? Colors.orange.shade100
: Colors.transparent,
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(30.0))),
padding: const EdgeInsets.only(top: 8.0, bottom: 20.0),
child: Text("$d",
style: dates.indexOf(d) == selected
? selectedText
: daysText),
),
);
}).toList(),
),
const SizedBox(height: 10.0),
],
),
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(32.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_buildTaskWithDate(),
const SizedBox(height: 20.0),
_buildTask(),
const SizedBox(height: 20.0),
_buildTask(),
const SizedBox(height: 20.0),
_buildTaskWithDate(),
const SizedBox(height: 20.0),
_buildTask(),
const SizedBox(height: 20.0),
_buildTask(),
const SizedBox(height: 20.0),
],
),
),
),
);
}
Row _buildTaskWithDate() {
return Row(
children: <Widget>[
Text(
"March\n22",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
letterSpacing: 1.5),
),
const SizedBox(width: 20.0),
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0),
bottomLeft: Radius.circular(20.0),
),
color: Colors.white70,
),
padding: const EdgeInsets.symmetric(
horizontal: 32.0, vertical: 16.0),
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"06:00AM - 07:00AM",
style: TextStyle(
letterSpacing: 2.5, color: Colors.green),
),
const SizedBox(height: 5.0),
Text(
"Genetha Curfew",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blueGrey,
fontSize: 16.0),
),
Text("India",style: TextStyle(color: Colors.amber),)
],
),
),
)
],
);
}
Container _buildTask() {
return Container(
padding: const EdgeInsets.only(left: 70.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"10:30 - 11:30AM",
style:
TextStyle(letterSpacing: 2.5, color: Colors.white),
),
const SizedBox(height: 5.0),
Text(
"Meeting At",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 16.0),
),
Text("Google",style: TextStyle(color: Colors.amber),)
],
),
);
}
}
class HeaderWidget extends StatelessWidget {
final Widget body;
final Widget header;
final Color headerColor;
final Color backColor;
const HeaderWidget(
{Key key,
this.body,
this.header,
this.headerColor = Colors.white,
this.backColor = Colors.pinkAccent})
: super(key: key);
@override
Widget build(BuildContext context) {
return _buildBody();
}
Stack _buildBody() {
return Stack(
children: <Widget>[
Positioned(
right: 0,
top: 0,
width: 10,
height: 200,
child: DecoratedBox(
decoration: BoxDecoration(
color: backColor,
borderRadius:
BorderRadius.only(topLeft: Radius.circular(20.0))),
),
),
Positioned(
right: 0,
top: 100,
width: 50,
bottom: 0,
child: DecoratedBox(
decoration: BoxDecoration(
color: backColor,
),
),
),
Column(
children: <Widget>[
(header != null)?
Container(
margin: const EdgeInsets.only(right: 10.0),
decoration: BoxDecoration(
borderRadius:
BorderRadius.only(bottomRight: Radius.circular(20.0)),
color: headerColor,
),
child: header):Container(),
(body != null)?
Expanded(
child: Material(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.only(topLeft: Radius.circular(30.0))),
elevation: 0,
color: backColor,
child: body),
):Container(),
],
),
],
);
}
}
|
Theme 2
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class TodoHomeOnePage extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return TodoHomeOnePageState();
}
}
class TodoHomeOnePageState extends State {
static final String path = "lib/src/pages/todo/todo_home1.dart";
final Color color1 = Color(0xffFA696C);
final Color color2 = Color(0xffFA8165);
final Color color3 = Color(0xffFB8964);
final List tasks = [
{"title":"Buy computer science book from Agarwal book store", "completed": true},
{"title":"Send updated logo and source files", "completed": false},
{"title":"Recharge broadband bill", "completed": false},
{"title":"Pay telephone bill", "completed": false},
];
List<Widget>widgets=new List();
@override
void initState() {
// TODO: implement initState
super.initState();
getTasks();
}
@override
Widget build(BuildContext context){
getTasks();
return Scaffold(
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_buildHeader(),
SizedBox(height: 40.0),
Container(
height: 50,
padding: const EdgeInsets.only(left: 20.0),
child: OverflowBox(
maxWidth: 500,
alignment: Alignment.centerLeft,
child: Row(
children: <Widget>[
Text("Today", style: TextStyle(
color: Colors.black,
fontSize: 45.0,
fontWeight: FontWeight.bold
),),
SizedBox(width: 100),
Text("Tomorrow", style: TextStyle(
color: Colors.grey.shade400,
fontSize: 45.0,
fontWeight: FontWeight.bold
),),
],
),
),
),
SizedBox(height: 30.0),
Column(
children: widgets,
)
],
),
),
bottomNavigationBar: BottomAppBar(
elevation: 0,
child: Container(
height: 50,
child: Row(
children: <Widget>[
SizedBox(width: 20.0),
IconButton(
color: Colors.grey.shade700,
icon: Icon(Icons.menu, size: 30,), onPressed: (){},),
Spacer(),
IconButton(
color: Colors.grey.shade700,
icon: Icon(FontAwesomeIcons.calendarAlt,size: 30,), onPressed: (){},),
SizedBox(width: 20.0),
],
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
backgroundColor: color2,
child: Icon(Icons.add),
onPressed: (){},
),
);
}
Container _buildHeader() {
return Container(
height: 250,
width: double.infinity,
child: Stack(
children: <Widget>[
Positioned(
bottom: 0,
left: -100,
top: -150,
child: Container(
width: 350,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [color1, color2]
),
boxShadow: [
BoxShadow(
color: color2,
offset: Offset(4.0,4.0),
blurRadius: 10.0
)
]
),
),
),
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [color3,color2]
),
boxShadow: [
BoxShadow(
color: color3,
offset: Offset(1.0,1.0),
blurRadius: 4.0
)
]
),
),
Positioned(
top: 100,
right: 200,
child: Container(
width: 50,
height: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [color3,color2]
),
boxShadow: [
BoxShadow(
color: color3,
offset: Offset(1.0,1.0),
blurRadius: 4.0
)
]
),
),
),
Container(
margin: const EdgeInsets.only(
top: 60,
left: 30
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Himanshu", style: TextStyle(
color: Colors.white,
fontSize: 28.0,
fontWeight: FontWeight.w700
),),
SizedBox(height: 10.0),
Text("You have 2 remaining\ntasks for today!", style: TextStyle(
color: Colors.white,
fontSize: 18.0
),)
],
),
)
],
),
);
}
getTasks()
{
tasks.map((task){
widgets.add(Padding(
padding: const EdgeInsets.only(left: 10.0),
child: ListTile(
title: Text(task["title"], style: TextStyle(
decoration: task["completed"] ? TextDecoration.lineThrough : TextDecoration.none,
decorationColor: Colors.red,
fontSize: 22.0,
color: Colors.black
),)
))) ;
});
}
getWidgets()
{
widgets.map((e) => e);
}
}
|
Theme 3
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:intl/intl.dart';
class TodoHomeTwoPage extends StatelessWidget {
static final String path = "lib/src/pages/todo/todo_home2.dart";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.indigo,
),
body: HeaderFooterwidget(
header: _buildDateHeader(DateTime.now()),
body: SingleChildScrollView(
padding: const EdgeInsets.all(32.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_buildTask(color: Colors.pink.shade300),
const SizedBox(height: 20.0),
_buildTaskTwo(),
const SizedBox(height: 20.0),
_buildTask(color: Colors.indigo.shade300),
const SizedBox(height: 20.0),
_buildTaskTwo(),
],
),
),
footer: _buildBottomBar(),
),
);
}
Container _buildBottomBar() {
return Container(
padding: const EdgeInsets.symmetric(
vertical: 8.0,
horizontal: 16.0,
),
child: Row(
children: <Widget>[
SizedBox(width: 5.0),
Expanded(
child: TextField(
textCapitalization: TextCapitalization.sentences,
style: TextStyle(color: Colors.white70),
decoration: InputDecoration(
border: InputBorder.none,
hintText: "jot down your task",
hintStyle: TextStyle(color: Colors.white54),
),
),
),
IconButton(
color: Colors.white70,
icon: Icon(Icons.add),
onPressed: () {},
)
],
),
);
}
Widget _buildDateHeader(DateTime date) {
final TextStyle boldStyle = TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24,
letterSpacing: 2.0);
return Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: MaterialButton(
minWidth: 0,
elevation: 0,
highlightElevation: 0,
textColor: Colors.pink,
padding: const EdgeInsets.symmetric(
vertical: 16.0,
horizontal: 8.0,
),
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
onPressed: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(DateFormat.MMM().format(date).toUpperCase()),
const SizedBox(height: 5.0),
Text(
DateFormat.d().format(date),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0),
)
],
),
),
),
const SizedBox(width: 20.0),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
DateFormat.EEEE().format(date).toUpperCase(),
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
letterSpacing: 2.0,
),
),
Text(
"Today".toUpperCase(),
style: boldStyle,
)
],
),
],
);
}
Widget _buildTaskTwo() {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0),
bottomLeft: Radius.circular(20.0),
),
color: Colors.white70,
),
padding: const EdgeInsets.symmetric(horizontal: 32.0, vertical: 16.0),
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"10:30 - 11:30AM",
style: TextStyle(letterSpacing: 2.5, color: Colors.pink),
),
const SizedBox(height: 5.0),
Text(
"Meeting At",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.pink,
fontSize: 16.0),
),
Text("Google"),
const SizedBox(height: 5.0),
Divider(color: Colors.pink,),
],
),
);
}
Container _buildTask({Color color = Colors.indigo}) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(20.0),
bottomLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0),
),
color: color,
),
padding: const EdgeInsets.symmetric(horizontal: 32.0, vertical: 16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"10:30 - 11:30AM",
style: TextStyle(letterSpacing: 2.5, color: Colors.white),
),
const SizedBox(height: 5.0),
Text(
"Meeting With",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
color: Colors.white),
),
Text("PM")
],
),
);
}
}
class HeaderFooterwidget extends StatelessWidget {
final Widget header;
final Widget footer;
final Widget body;
final Color headerColor;
final Color footerColor;
final double headerHeight;
const HeaderFooterwidget(
{Key key,
this.header,
this.footer,
this.body,
this.headerColor = Colors.indigo,
this.footerColor = Colors.pink,
this.headerHeight})
: super(key: key);
@override
Widget build(BuildContext context) {
return _buildBody();
}
Stack _buildBody() {
return Stack(
children: <Widget>[
Positioned(
top: 20,
bottom: 120,
right: 0,
width: 30,
child: DecoratedBox(
decoration: BoxDecoration(color: headerColor),
),
),
Positioned(
left: 0,
right: 0,
bottom: 0,
height: 120,
child: DecoratedBox(
decoration: BoxDecoration(color: footerColor),
),
),
Positioned(
bottom: 100,
right: 0,
width: 10,
height: 60,
child: DecoratedBox(
decoration: BoxDecoration(
color: headerColor,
borderRadius:
BorderRadius.only(bottomLeft: Radius.circular(20.0))),
),
),
Column(
children: <Widget>[
_buildHeader(),
Expanded(
child: Container(
margin: const EdgeInsets.only(right: 10.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20.0),
),
child: body,
),
),
const SizedBox(height: 10.0),
footer,
],
),
],
);
}
Widget _buildHeader() {
return Container(
height: headerHeight,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(30.0)),
color: headerColor,
),
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 10.0),
child: header,
);
}
}
|
Theme 4
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:cached_network_image/cached_network_image.dart';
class TodoHomeThreePage extends StatelessWidget {
static final String path = "lib/src/pages/todo/todo_home3.dart";
@override
Widget build(BuildContext context) {
var orangeTextStyle = TextStyle(
color: Colors.deepOrange,
);
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0,
leading: Padding(
padding: const EdgeInsets.only(left: 16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
height: 4.0,
width: 18.0,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(2.0),
),
),
const SizedBox(height: 4.0),
Container(
height: 4.0,
width: 12.0,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(2.0),
),
),
],
),
),
actions: <Widget>[
Padding(
padding:
const EdgeInsets.symmetric(vertical: 12.0, horizontal: 16.0),
child: CircleAvatar(
backgroundColor: Colors.black38,
maxRadius: 15.0,
child: Image.asset("assets/login1.png",fit: BoxFit.cover,width: 20,),
),
)
],
),
body: ListView(
padding: const EdgeInsets.all(16.0),
children: <Widget>[
Text(
"Wiki Lists",
style: Theme.of(context).textTheme.display1.copyWith(
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
const SizedBox(height: 16.0),
Row(
children: <Widget>[
Expanded(
child: _buildWikiCategory(FontAwesomeIcons.calendarCheck,
"All Wikis", Colors.deepOrange.withOpacity(0.7)),
),
const SizedBox(width: 16.0),
Expanded(
child: _buildWikiCategory(FontAwesomeIcons.lock,
"My private notes", Colors.blue.withOpacity(0.6)),
),
],
),
const SizedBox(height: 16.0),
Row(
children: <Widget>[
Expanded(
child: _buildWikiCategory(FontAwesomeIcons.bookmark,
"Bookmarked wikis", Colors.indigo.withOpacity(0.7)),
),
const SizedBox(width: 16.0),
Expanded(
child: _buildWikiCategory(
FontAwesomeIcons.file, "Templates", Colors.greenAccent),
),
],
),
const SizedBox(height: 16.0),
Text(
"Recently Opened Wikis",
style: orangeTextStyle,
),
const SizedBox(height: 10.0),
_buildRecentWikiRow("assets/login1.png", "Brand Guideline"),
const SizedBox(height: 5.0),
_buildRecentWikiRow("assets/login1.png", "Project Grail Sprint plan"),
const SizedBox(height: 5.0),
_buildRecentWikiRow("assets/login1.png", "Personal Wiki"),
const SizedBox(height: 20.0),
Row(
children: <Widget>[
Text(
"Channels/Group",
style: orangeTextStyle,
),
IconButton(
icon: Icon(Icons.add_circle_outline),
color: Colors.greenAccent,
onPressed: () {},
),
],
),
_buildChannelListItem("Tixio 2.0"),
_buildChannelListItem("Project Grail"),
_buildChannelListItem("Fun facts"),
],
),
bottomNavigationBar: BottomAppBar(
elevation: 5.0,
child: Row(
children: <Widget>[
const SizedBox(width: 16.0),
IconButton(
icon: Icon(Icons.home),
onPressed: (){},
color: Colors.deepOrange,
),
Spacer(),
IconButton(
icon: Icon(Icons.message),
onPressed: (){},
),
const SizedBox(width: 16.0),
],
),
),
floatingActionButton: MaterialButton(
onPressed: (){},
color: Colors.green,
child: Icon(Icons.add),
textColor: Colors.white,
minWidth: 0,
elevation: 4.0,
padding: const EdgeInsets.all(8.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
Row _buildChannelListItem(String title) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(
FontAwesomeIcons.circle,
size: 16.0,
),
const SizedBox(width: 10.0),
Text(title),
Spacer(),
IconButton(
icon: Icon(Icons.more_vert),
onPressed: () {},
),
],
);
}
Row _buildRecentWikiRow(String avatar, String title) {
return Row(
children: <Widget>[
CircleAvatar(
radius: 15.0,
backgroundColor: Colors.black38,
child: Image.asset(avatar,fit: BoxFit.cover,width: 20,),
),
const SizedBox(width: 10.0),
Text(
title,
style: TextStyle(
color: Colors.grey.shade700,
fontWeight: FontWeight.bold,
),
)
],
);
}
Stack _buildWikiCategory(IconData icon, String label, Color color) {
return Stack(
children: <Widget>[
Container(
padding: const EdgeInsets.all(26.0),
alignment: Alignment.centerRight,
child: Opacity(
opacity: 0.3,
child: Icon(
icon,
size: 40,
color: Colors.white,
)),
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(20.0),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
icon,
color: Colors.white,
),
const SizedBox(height: 16.0),
Text(
label,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
)
],
),
)
],
);
}
}
|
