import 'package:flutter/material.

dart';

class AppColor {
static const Color red = Colors.red;
static const Color blue = Color(0xFF5F52EE);
static const Color black = Colors.black;
static const Color white = Colors.white;
static const Color grey = Colors.grey;
static const Color brown = Colors.brown;
static const Color pink = Colors.pink;
static const Color orange = Colors.orange;
static const Color bgColor = Color(0xFFEEEFF5);
static const Color shadow = Colors.black26;
}

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'pages/home_page.dart';
import 'resources/app_color.dart';

void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarBrightness: Brightness.light,
statusBarIconBrightness: Brightness.dark,
));
runApp(const TodoApp());
}

class TodoApp extends StatelessWidget {

const TodoApp({super.key});

// This widget is the root of your application.

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
 theme: ThemeData(
useMaterial3: true,
appBarTheme: const AppBarTheme(backgroundColor: AppColor.bgColor),
),
home: const HomePage(title: 'Todos'),
);
}
}

import 'dart:math' as math;

import 'package:flutter/material.dart';
import '../resources/app_color.dart';

class CustomAppBar extends StatelessWidget with PreferredSizeWidget {

final VoidCallback? leftPressed;
final String title;

const CustomAppBar({
super.key,
this.leftPressed,
required this.title,
});

@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0)
.copyWith(top: MediaQuery.of(context).padding.top + 4.6, bottom: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: leftPressed,
child: Transform.rotate(
angle: 45 * (math.pi / 180),
child: Container(
padding: const EdgeInsets.all(6.8),
decoration: BoxDecoration(
color: AppColor.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: const [
BoxShadow(
color: AppColor.shadow,
 offset: Offset(3.0, 3.0),
blurRadius: 4.0,
),
],
),
child: Transform.rotate(
angle: -45 * (math.pi / 180),
child: const Icon(Icons.arrow_back_ios_new,
size: 24.0, color: AppColor.brown),
),
),
),
),
Text(title,
style: const TextStyle(color: AppColor.blue, fontSize: 22.0)),
const CircleAvatar(
backgroundImage: AssetImage('assets/images/avatar.png'),
radius: 24.0,
),
],
),
);
}

@override
Size get preferredSize => const Size.fromHeight(64.0);
}

import 'package:flutter/material.dart';
import '../resources/app_color.dart';

class SearchBox extends StatelessWidget {

final TextEditingController? controller;
final Function(String)? onChanged;

const SearchBox({
super.key,
this.controller,
this.onChanged,
});

@override
Widget build(BuildContext context) {
 return Container(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
decoration: BoxDecoration(
color: AppColor.white,
borderRadius: BorderRadius.circular(20.0),
boxShadow: const [
BoxShadow(
color: AppColor.shadow,
offset: Offset(0.0, 3.0),
blurRadius: 6.0,
),
],
),
child: TextField(
controller: controller,
onChanged: onChanged,
decoration: const InputDecoration(
border: InputBorder.none,
hintText: 'Search',
hintStyle: TextStyle(color: AppColor.grey),
prefixIcon: Icon(Icons.search, color: AppColor.black),
prefixIconConstraints: BoxConstraints(minWidth: 28.0),
),
),
);
}
}

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import '../components/custom_app_bar.dart';
import '../components/search_box.dart';
import '../resources/app_color.dart';

class HomePage extends StatefulWidget {

final String title;

const HomePage({super.key, required this.title});

@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final TextEditingController _searchController = TextEditingController();

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColor.bgColor,
appBar: CustomAppBar(
leftPressed: () =>
SystemChannels.platform.invokeMethod('SystemNavigator.pop'),
title: widget.title),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0)
.copyWith(top: 12.0, bottom: 92.0),
child: Column(
children: [
SearchBox(controller: _searchController),
const Divider(height: 32.6, thickness: 1.36, color: AppColor.grey),

],

),
),
);
}
}