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: ^1.0.8
flutter_screenutil: ^5.9.3
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ScreenUtilInit(
designSize: Size(360, 690), // Adjust this for your base design
minTextAdapt: true,
builder: (context, child) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomeScreen(),
);
},
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0XFFFAF9FF),
appBar: AppBar(
surfaceTintColor: Colors.transparent,
backgroundColor: Colors.white,
elevation: 1,
title: Text(
'Home',
style: TextStyle(color: Colors.black),
),
centerTitle: true,
leading: Icon(Icons.menu, color: Colors.black),
actions: [
Padding(
padding: EdgeInsets.all(8.0),
child: CircleAvatar(
backgroundColor: Colors.grey[200],
child: FlutterLogo(size: 20),
),
),
],
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Column(
children: [
Text(
'Welcome Back!',
style: TextStyle(fontSize: 22.sp, fontWeight: FontWeight.bold),
),
SizedBox(height: 4.h),
Text(
'Hi, Choudary Aoun',
style: TextStyle(fontSize: 18.sp, color: Colors.grey[600]),
),
],
),
),
SizedBox(height: 20.h),
Expanded(
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 16.w,
mainAxisSpacing: 16.h,
childAspectRatio: 171 / 208,
),
itemCount: 4,
itemBuilder: (context, index) {
List<String> titles = ['Walk', 'Sleep', 'Water', 'Heart'];
return Card(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.r),
),
elevation: 0,
child: Center(
child: Text(
titles[index],
style: TextStyle(fontSize: 20.sp, fontWeight: FontWeight.w500),
),
),
);
},
),
),
],
),
),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.white,
selectedItemColor: Colors.blue,
unselectedItemColor: Colors.grey,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(icon: Icon(Icons.fitness_center), label: 'Fitness'),
BottomNavigationBarItem(icon: Icon(Icons.water), label: 'Hydration'),
BottomNavigationBarItem(icon: Icon(Icons.favorite), label: 'Health'),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
],
),
);
}
}