UI
1. main.dart
<![CDATA[
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:b/home_page.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
// for fonts
textTheme: GoogleFonts.notoSansAdlamTextTheme(),
),
home: const HomePage()
);
}
}
]]>
home_screen.dart
<![CDATA[
import 'package:flutter/material.dart';
import 'package:b/Model/model.dart';
import 'package:b/more_about_doctor.dart';
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.only(top: 60, left: 10, right: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// for profile and menu
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.asset("Images/menu.png"),
Image.asset("Images/profile.png"),
],
),
const SizedBox(
height: 10,
),
const Text(
" Chools Your Doctor",
style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
),
const SizedBox(
height: 10,
),
const Text(
" 100+ Available",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black45),
),
const SizedBox(
height: 30,
),
// For search bar
searchBar(),
const SizedBox(
height: 30,
),
Row(
children: [
const Text(
" Category",
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
),
const Spacer(),
const Text(
" Children",
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
const SizedBox(
width: 5,
),
Container(
height: 25,
width: 60,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: const Color(0xFFFDBFAFC)),
child: const Center(
child: Text(
"Ault",
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.blue),
),
),
)
],
),
const SizedBox(
height: 10,
),
Expanded(
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: doctorItems.length,
itemBuilder: (context, index) {
final doctor = doctorItems[index];
return Padding(
padding: const EdgeInsets.all(8),
child: Card(
color: Colors.white,
child: Column(
children: [
Container(
height: 130,
width: 160,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(doctor.categoryImage),
fit: BoxFit.cover),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
),
),
),
const SizedBox(
height: 1,
),
Text(
doctor.drCategory,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 17,
),
),
const SizedBox(
height: 1,
),
Text(
"${doctor.noOfDoctor.toString()} Doctors",
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 17,
color: Colors.black38),
),
],
),
),
);
},
),
),
const SizedBox(
height: 20,
),
const Text(
" Available Doctors",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25,
),
),
const SizedBox(
height: 20,
),
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: doctorItems.length,
itemBuilder: (context, index) {
final doctor = doctorItems[index];
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MoreAboutDoctor(doctor: doctor),
),
);
},
child: Padding(
padding: const EdgeInsets.all(8),
child: Material(
elevation: 5,
color: doctor.containerColor,
borderRadius: BorderRadius.circular(40),
child: Column(
children: [
SizedBox(
width: double.infinity,
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 20),
child: Hero(
tag: doctor.image,
child: CircleAvatar(
backgroundImage:
AssetImage(doctor.image),
radius: 40,
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 13, left: 15),
child: Column(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
doctor.drName,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
const SizedBox(
width: 15,
),
const Icon(
Icons.star,
size: 18,
color: Colors.amber,
),
const Icon(
Icons.star,
size: 18,
color: Colors.amber,
),
const Icon(
Icons.star,
size: 18,
color: Colors.amber,
),
const Icon(
Icons.star,
size: 18,
color: Colors.amber,
),
],
),
Text(
doctor.drCategory,
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
Row(
children: [
Container(
height: 25,
width: 41,
decoration: BoxDecoration(
color: doctor.color,
borderRadius:
BorderRadius.circular(30),
),
child: Center(
child: Text(
"${doctor.time1.toString()}.00",
style: const TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight:
FontWeight.bold,
),
),
),
),
const SizedBox(
width: 30,
),
Text(
"${doctor.time2.toString()}.00",
),
const SizedBox(
width: 30,
),
Text(
"${doctor.time3.toString()}.00",
),
const SizedBox(
width: 30.5,
),
Material(
color: doctor.color,
borderRadius:
const BorderRadius.only(
topLeft: Radius.circular(20),
bottomRight:
Radius.circular(40),
),
child: const Padding(
padding: EdgeInsets.all(15),
child: Icon(
Icons.arrow_forward,
color: Colors.white,
),
),
),
],
)
],
),
),
],
),
),
],
),
)),
);
},
),
),
],
),
),
);
}
Padding searchBar() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 5),
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: const Color.fromARGB(31, 141, 140, 140),
borderRadius: BorderRadius.circular(15)),
child: const Row(
children: [
Padding(
padding: EdgeInsets.only(left: 15),
child: Icon(
Icons.search,
size: 30,
color: Colors.black54,
),
),
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 18),
child: TextField(
decoration: InputDecoration(
hintText: "Search Doctor Speciality",
hintStyle: TextStyle(
color: Colors.black45,
),
border: InputBorder.none,
),
),
),
),
],
),
),
);
}
}
]]>
more_about_doctor.dart
<![CDATA[
import 'package:flutter/material.dart';
import 'package:b/Model/model.dart';
class MoreAboutDoctor extends StatelessWidget {
const MoreAboutDoctor({super.key, required this.doctor});
final DoctorDetail doctor;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
// For image
Positioned(
top: 0,
left: 0,
right: 0,
height: MediaQuery.of(context).size.height * 0.45,
child: Hero(
tag: doctor.image,
child: Container(
width: MediaQuery.of(context).size.width,
color: doctor.containerColor,
child: Image.asset(
doctor.image,
fit: BoxFit.fitHeight,
),
),
),
),
Positioned(
top: MediaQuery.of(context).size.height * 0.4,
left: 0,
right: 0,
height: MediaQuery.of(context).size.height * 0.69,
child: Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
topRight: Radius.circular(40),
),
),
child: Padding(
padding: const EdgeInsets.only(top: 27, left: 15, right: 15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// for name
Text(
doctor.drName,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 40,
),
),
// For doctor category
const SizedBox(
height: 12,
),
Text(
doctor.drCategory,
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black45,
fontSize: 20,
),
),
const SizedBox(
height: 20,
),
const Text(
"About Doctor",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25,
),
),
const SizedBox(
height: 10,
),
// about docutor
Text(
doctor.aboutDoctor,
style: const TextStyle(
height: 2,
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
const SizedBox(
height: 20,
),
// for schedules
const Text(
"Upcomin Schedules",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 30,
),
),
const SizedBox(
height: 25,
),
Container(
height: 100,
decoration: BoxDecoration(
color: doctor.containerColor,
borderRadius: BorderRadius.circular(40),
),
child: Row(
children: [
const SizedBox(
width: 15,
),
Container(
height: 80,
width: 100,
decoration: BoxDecoration(
color: doctor.color,
borderRadius: BorderRadius.circular(20),
),
child: Center(
child: Text(
doctor.date,
style: const TextStyle(fontSize: 30,
height: 0.9,
color: Colors.white,
fontWeight: FontWeight.bold
),
),
),
),
Padding(padding: const EdgeInsets.only(left: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
"Consultation",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
Text(
doctor.consultainTime,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
],
),
)
],
),
)
],
),
),
),
),
// for back button
Positioned(
top: MediaQuery.of(context).padding.top,
left: 10,
child: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: const Icon(
Icons.arrow_back,
color: Colors.black,
),
),
),
],
),
);
}
}
]]>
Model/model.dart
<![CDATA[
import 'package:flutter/material.dart';
class DoctorDetail {
String image;
String categoryImage;
String drName;
String drCategory;
Color containerColor;
Color color;
String date;
int noOfDoctor;
int time1;
int time2;
int time3;
String consultainTime;
String aboutDoctor;
DoctorDetail({
required this.containerColor,
required this.color,
required this.date,
required this.consultainTime,
required this.time2,
required this.time3,
required this.image,
required this.categoryImage,
required this.drName,
required this.drCategory,
required this.noOfDoctor,
required this.aboutDoctor,
required this.time1,
});
}
List<DoctorDetail> doctorItems = [
DoctorDetail(
image: "Images/doctor.png",
categoryImage: "Images/teeth.png",
drName: 'Dr. Jason',
drCategory: "Dental Surgon",
noOfDoctor: 79,
time1: 9,
date: " 15\nJan",
aboutDoctor:
"It seems like you're referring to a dentist who specializes in oral surgery. Oral and maxillofacial surgeons are dental specialists who are trained to perform surgical procedures on the mouth, jaws, face, and neck",
consultainTime: 'Sunday . 9am - 11am',
time2: 11,
time3: 16,
containerColor: const Color(0xFFEEF0FF),
color: const Color(0xFF6D7BCE)),
DoctorDetail(
image: "Images/doctor1.png",
categoryImage: "Images/heart.png",
drName: 'Dr. Johan',
drCategory: "Heart Surgeon",
noOfDoctor: 70,
date: " 11\nFeb",
time1: 8,
aboutDoctor:
"A heart surgeon, also known as a cardiac surgeon, is a highly trained medical professional who specializes in surgical procedures of the heart and blood vessels. They perform surgeries to treat various conditions affecting the heart",
consultainTime: 'Monday . 8am - 12am',
time2: 10,
time3: 12,
containerColor: const Color(0xFFFCEFDF),
color: const Color(0xFFFF8906)),
DoctorDetail(
image: "Images/doctor2.png",
categoryImage: "Images/eye.png",
drName: 'Dr. Smith',
drCategory: "Eye Surgon",
noOfDoctor: 55,
date: " 05\nApr",
time1: 6,
aboutDoctor:
"An eye surgeon, also known as an ophthalmologist, specializes in the medical and surgical treatment of diseases and conditions related to the eyes. Ophthalmologists undergo extensive training, including medical school, internship",
consultainTime: 'Sunday . 9am - 11am',
time2: 10,
time3: 18,
containerColor: const Color(0xFFEEF0FF),
color: const Color(0xFF6D7BCE)),
DoctorDetail(
date: " 10\nDec",
image: "Images/doctor3.png",
categoryImage: "Images/skeleton1.png",
drName: 'Dr. Dhoni',
drCategory: "Skeleton Surgon",
noOfDoctor: 99,
time1: 7,
aboutDoctor:
"The term skeleton surgeon isn't commonly used in medical practice. However, based on the context, it sounds like you might be referring to orthopedic surgeons, who specialize in the diagnosis, treatment, and surgical management",
consultainTime: 'Friday . 8am - 11am',
time2: 11,
time3: 18,
containerColor: const Color.fromARGB(255, 238, 255, 244),
color: const Color.fromARGB(255, 109, 206, 122),
),
DoctorDetail(
image: "Images/doctor4.png",
categoryImage: "Images/lungs.png",
drName: 'Dr. Messi',
drCategory: "Lungs Surgon",
noOfDoctor: 67,
time1: 8,
date: " 30\nApr",
aboutDoctor:
"The term Lungs surgeon isn't commonly used in medical practice. However, based on the context, it sounds like you might be referring to orthopedic surgeons, who specialize in the diagnosis, treatment, and surgical management",
consultainTime: 'Sunday . 5am - 10am',
time2: 11,
time3: 18,
containerColor: const Color.fromARGB(255, 252, 238, 255),
color: const Color.fromARGB(255, 191, 109, 206),
),
];
</zmp></pre>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
</main><!-- End #main -->
<div id="preloader"></div>
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Vendor JS Files -->
<script src="https://blog.manvia.in/public/assets/vendor/aos/aos.js"></script>
<script src="https://blog.manvia.in/public/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="https://blog.manvia.in/public/assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="https://blog.manvia.in/public/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="https://blog.manvia.in/public/assets/vendor/php-email-form/validate.js"></script>
<script src="https://blog.manvia.in/public/assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="https://blog.manvia.in/public/assets/vendor/waypoints/noframework.waypoints.js"></script>
<!-- Template Main JS File -->
<script src="https://blog.manvia.in/public/assets/js/main.js"></script>
</body>
</html>]]>
MANVIA BLOG
