Untitled
user_9975557719
dart
4 years ago
17 kB
16
Indexable
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:food_ui_mobile_app/data/constan.dart';
import 'package:google_fonts/google_fonts.dart';
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
child: Container(
decoration: BoxDecoration(
color: pinkC,
image: DecorationImage(
image: AssetImage("assets/images/pattern.png"),
fit: BoxFit.cover,
),
),
child: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.location_on,
color: Colors.white,
),
SizedBox(width: 8),
Text(
"Block B Phase 2 Johar Town, Lahore",
style: GoogleFonts.montserrat(
fontSize: 16,
color: Colors.white,
),
),
],
),
SizedBox(height: 16),
TextField(
style: GoogleFonts.montserrat(
fontSize: 16,
color: pinkC,
),
cursorColor: pinkC,
decoration: InputDecoration(
fillColor: Colors.white,
filled: true,
focusColor: Colors.white,
prefixIcon: Icon(Icons.search, color: grayC),
hintText: "Search...",
hintStyle: GoogleFonts.montserrat(
fontSize: 16,
color: grayC,
),
contentPadding: EdgeInsets.all(16),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: BorderSide.none,
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: BorderSide.none,
),
),
),
],
),
),
),
),
preferredSize: Size.fromHeight(125),
),
body: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.all(24),
child: Column(
children: [
Container(
height: 160,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
image: DecorationImage(
image: NetworkImage(
"https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80",
),
fit: BoxFit.cover,
),
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
gradient: LinearGradient(
colors: [
Colors.black.withOpacity(.4),
Colors.black.withOpacity(.1),
],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
"Food",
style: GoogleFonts.montserrat(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
SizedBox(height: 4),
Text(
"Order food you love",
style: GoogleFonts.montserrat(
fontSize: 14,
color: Colors.white,
),
),
],
),
),
),
),
SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: 160,
width: 156,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
image: DecorationImage(
image: NetworkImage(
"https://images.unsplash.com/photo-1542838132-92c53300491e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80",
),
fit: BoxFit.cover,
),
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
gradient: LinearGradient(
colors: [
Colors.black.withOpacity(.6),
Colors.black.withOpacity(.1),
],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
"Grocery",
style: GoogleFonts.montserrat(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
SizedBox(height: 4),
Text(
"Shop daily life items",
style: GoogleFonts.montserrat(
fontSize: 12,
color: Colors.white,
),
),
],
),
),
),
),
Container(
height: 160,
width: 156,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
image: DecorationImage(
image: NetworkImage(
"https://images.unsplash.com/photo-1520080906273-ac3114063b21?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80",
),
fit: BoxFit.cover,
),
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
gradient: LinearGradient(
colors: [
Colors.black.withOpacity(.6),
Colors.black.withOpacity(.1),
],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
"Deserts",
style: GoogleFonts.montserrat(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
SizedBox(height: 4),
Text(
"Something Sweet",
style: GoogleFonts.montserrat(
fontSize: 12,
color: Colors.white,
),
),
],
),
),
),
),
],
),
SizedBox(height: 40),
ListView(
scrollDirection: Axis.horizontal,
children: [
Container(
height: 160,
width: 335,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
image: DecorationImage(
image: NetworkImage(
"https://images.unsplash.com/photo-1542838132-92c53300491e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80",
),
fit: BoxFit.cover,
),
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
gradient: LinearGradient(
colors: [
bannerC,
bannerC.withOpacity(.8),
bannerC.withOpacity(.3),
],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
RichText(
text: TextSpan(
text: "Get 25% Cashback ",
style: GoogleFonts.montserrat(
fontSize: 16,
color: pinkC,
),
children: [
TextSpan(
text: "on \ngrocery from our retailers",
style: GoogleFonts.montserrat(
fontSize: 16,
color: Colors.black87,
),
),
],
),
),
SizedBox(height: 16),
Container(
padding: EdgeInsets.symmetric(
horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: pinkC,
borderRadius: BorderRadius.circular(60),
),
child: Text(
"Code: CVB25",
style: GoogleFonts.montserrat(
fontSize: 12,
color: Colors.white,
),
),
)
],
),
),
),
),
Container(
height: 160,
width: 335,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
image: DecorationImage(
image: NetworkImage(
"https://images.unsplash.com/photo-1542838132-92c53300491e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80",
),
fit: BoxFit.cover,
),
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
gradient: LinearGradient(
colors: [
bannerC,
bannerC.withOpacity(.8),
bannerC.withOpacity(.3),
],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
RichText(
text: TextSpan(
text: "Get 25% Cashback ",
style: GoogleFonts.montserrat(
fontSize: 16,
color: pinkC,
),
children: [
TextSpan(
text: "on \ngrocery from our retailers",
style: GoogleFonts.montserrat(
fontSize: 16,
color: Colors.black87,
),
),
],
),
),
SizedBox(height: 16),
Container(
padding: EdgeInsets.symmetric(
horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: pinkC,
borderRadius: BorderRadius.circular(60),
),
child: Text(
"Code: CVB25",
style: GoogleFonts.montserrat(
fontSize: 12,
color: Colors.white,
),
),
)
],
),
),
),
),
],
),
],
),
),
),
);
}
}
Editor is loading...