diff --git a/README.md b/README.md
index 696372c8..d4265cd6 100644
--- a/README.md
+++ b/README.md
@@ -164,7 +164,7 @@ The code for Springy Widget is taken and refactored from (https://github.com/mat
## Todo App
-
+
## Hotel App
diff --git a/lib/src/pages/todo/todo_home2.dart b/lib/src/pages/todo/todo_home2.dart
new file mode 100644
index 00000000..ad701f72
--- /dev/null
+++ b/lib/src/pages/todo/todo_home2.dart
@@ -0,0 +1,288 @@
+/**
+ * Author: Damodar Lohani
+ * profile: https://github.com/lohanidamodar
+ */
+
+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: [
+ _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: [
+ 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: [
+ 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: [
+ 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: [
+ 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: [
+ Text(
+ "10:30 - 11:30AM",
+ style: TextStyle(letterSpacing: 2.5, color: Colors.pink),
+ ),
+ const SizedBox(height: 5.0),
+ Text(
+ "Meeting With",
+ style: TextStyle(
+ fontWeight: FontWeight.bold,
+ color: Colors.pink,
+ fontSize: 16.0),
+ ),
+ Text("John Doe"),
+ 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: [
+ 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("John Doe")
+ ],
+ ),
+ );
+ }
+}
+
+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: [
+ 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: [
+ _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,
+ );
+ }
+}
diff --git a/lib/src/widgets/main_menu.dart b/lib/src/widgets/main_menu.dart
index 63d7363b..f4f360b3 100644
--- a/lib/src/widgets/main_menu.dart
+++ b/lib/src/widgets/main_menu.dart
@@ -41,6 +41,7 @@ import 'package:flutter_ui_challenges/src/pages/quiz_app/quiz_finished.dart';
import 'package:flutter_ui_challenges/src/pages/quiz_app/quiz_page.dart';
import 'package:flutter_ui_challenges/src/pages/todo/todo2.dart';
import 'package:flutter_ui_challenges/src/pages/todo/todo_home1.dart';
+import 'package:flutter_ui_challenges/src/pages/todo/todo_home2.dart';
import 'package:flutter_ui_challenges/src/pages/travel/tdestination.dart';
import 'package:flutter_ui_challenges/src/pages/travel/travel_home.dart';
import 'package:flutter_ui_challenges/src/utils/constants.dart';
@@ -189,6 +190,8 @@ class _MainMenuState extends State {
SubMenuItem("Todo Week View", TodoTwoPage(), path: TodoTwoPage.path),
SubMenuItem("Todo Home One", TodoHomeOnePage(),
path: TodoHomeOnePage.path),
+ SubMenuItem("Todo Home Two", TodoHomeTwoPage(),
+ path: TodoHomeTwoPage.path),
]),
MenuItem(title: "Travel", icon: Icons.airplanemode_active, items: [
SubMenuItem("Travel Home", TravelHomePage(), path: TravelHomePage.path),
diff --git a/pubspec.yaml b/pubspec.yaml
index 0ea09940..0043fa25 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -30,6 +30,8 @@ dependencies:
charts_flutter: ^0.6.0
animated_floatactionbuttons: ^0.1.0
share: ^0.6.2
+ intl: ^0.15.8
+
flare_flutter:
git:
url: git://github.com/2d-inc/Flare-Flutter.git
diff --git a/screenshots/todo_home2.png b/screenshots/todo_home2.png
new file mode 100644
index 00000000..733195fe
Binary files /dev/null and b/screenshots/todo_home2.png differ