Flutter Todo Application Themes
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,
),
)
],
),
)
],
);
}
}
|
|
Article Contributed By :
|
|
|
|
|
283 Views
|
