Plant App – Flutter UI – Speed Code. Copy and paste the below code as per your requirements.
pubspec.yaml
flutter_svg: ^0.19.1main.dart
import 'package:flutter/material.dart';
import 'package:example/constants.dart';
import 'package:example/screens/home/home_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Plant App',
theme: ThemeData(
scaffoldBackgroundColor: kBackgroundColor,
primaryColor: kPrimaryColor,
textTheme: Theme.of(context).textTheme.apply(bodyColor: kTextColor),
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: HomeScreen(),
);
}
}constants.dart
import 'package:flutter/material.dart';
const kPrimaryColor = Color(0xFF0C9869);
const kTextColor = Color(0xFF3C4046);
const kBackgroundColor = Color(0xFFF9F8FD);
const double kDefaultPadding = 20.0;components/my_bottom_nav_bar.dart
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../constants.dart';
class MyBottomNavBar extends StatelessWidget {
const MyBottomNavBar({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.only(
left: kDefaultPadding * 2,
right: kDefaultPadding * 2,
bottom: kDefaultPadding,
),
height: 80,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
offset: const Offset(0, -10),
blurRadius: 35,
color: kPrimaryColor.withOpacity(0.38),
),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: SvgPicture.asset("assets/icons/flower.svg"),
onPressed: () {},
),
IconButton(
icon: SvgPicture.asset("assets/icons/heart-icon.svg"),
onPressed: () {},
),
IconButton(
icon: SvgPicture.asset("assets/icons/user-icon.svg"),
onPressed: () {},
),
],
),
);
}
}screens/home/components/title_with_more_bbtn.dart
import 'package:flutter/material.dart';
import '../../../constants.dart';
class TitleWithMoreBtn extends StatelessWidget {
const TitleWithMoreBtn({
Key? key,
required this.title,
required this.press,
}) : super(key: key);
final String title;
final VoidCallback press;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: kDefaultPadding),
child: Row(
children: <Widget>[
TitleWithCustomUnderline(text: title),
const Spacer(),
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
color: kPrimaryColor,
onPressed: press,
child: const Text(
"More",
style: TextStyle(color: Colors.white),
),
),
],
),
);
}
}
class TitleWithCustomUnderline extends StatelessWidget {
const TitleWithCustomUnderline({
Key? key,
required this.text,
}) : super(key: key);
final String text;
@override
Widget build(BuildContext context) {
return SizedBox(
height: 24,
child: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: kDefaultPadding / 4),
child: Text(
text,
style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
margin: const EdgeInsets.only(right: kDefaultPadding / 4),
height: 7,
color: kPrimaryColor.withOpacity(0.2),
),
)
],
),
);
}
}screens/home/components/recomend_plant.dart
import 'package:flutter/material.dart';
import 'package:example/screens/details/details_screen.dart';
import '../../../constants.dart';
class RecomendsPlants extends StatelessWidget {
const RecomendsPlants({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: <Widget>[
RecomendPlantCard(
image: "assets/1.png",
title: "Test",
country: "India",
price: 340,
press: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailsScreen(),
),
);
},
),
RecomendPlantCard(
image: "assets/2.png",
title: "Example",
country: "India",
price: 540,
press: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailsScreen(),
),
);
},
),
RecomendPlantCard(
image: "assets/3.png",
title: "Test",
country: "India",
price: 540,
press: () {},
),
],
),
);
}
}
class RecomendPlantCard extends StatelessWidget {
const RecomendPlantCard({
Key? key,
required this.image,
required this.title,
required this.country,
required this.price,
required this.press,
}) : super(key: key);
final String image, title, country;
final int price;
final VoidCallback press;
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Container(
margin: const EdgeInsets.only(
left: kDefaultPadding,
top: kDefaultPadding / 2,
bottom: kDefaultPadding * 2.5,
),
width: size.width * 0.4,
child: Column(
children: <Widget>[
Image.asset(image),
GestureDetector(
onTap: press,
child: Container(
padding: const EdgeInsets.all(kDefaultPadding / 2),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10),
),
boxShadow: [
BoxShadow(
offset: const Offset(0, 10),
blurRadius: 50,
color: kPrimaryColor.withOpacity(0.23),
),
],
),
child: Row(
children: <Widget>[
RichText(
text: TextSpan(
children: [
TextSpan(
text: "$title\n".toUpperCase(),
style: Theme.of(context).textTheme.button),
TextSpan(
text: country.toUpperCase(),
style: TextStyle(
color: kPrimaryColor.withOpacity(0.5),
),
),
],
),
),
const Spacer(),
Text(
'\₹$price',
style: Theme.of(context)
.textTheme
.button!
.copyWith(color: kPrimaryColor),
)
],
),
),
)
],
),
);
}
}
screens/home/components/header_with_searchbox.dart
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../../../constants.dart';
class HeaderWithSearchBox extends StatelessWidget {
const HeaderWithSearchBox({
Key? key,
required this.size,
}) : super(key: key);
final Size size;
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.only(bottom: kDefaultPadding * 2.5),
// It will cover 20% of our total height
height: size.height * 0.2,
child: Stack(
children: <Widget>[
Container(
padding: const EdgeInsets.only(
left: kDefaultPadding,
right: kDefaultPadding,
bottom: 36 + kDefaultPadding,
),
height: size.height * 0.2 - 27,
decoration: const BoxDecoration(
color: kPrimaryColor,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(36),
bottomRight: Radius.circular(36),
),
),
child: Row(
children: <Widget>[
Text(
'Hi Plant!',
style: Theme.of(context).textTheme.headline5!.copyWith(
color: Colors.white, fontWeight: FontWeight.bold),
),
const Spacer(),
Image.asset("assets/logo.png")
],
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
alignment: Alignment.center,
margin: const EdgeInsets.symmetric(horizontal: kDefaultPadding),
padding: const EdgeInsets.symmetric(horizontal: kDefaultPadding),
height: 54,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
offset: const Offset(0, 10),
blurRadius: 50,
color: kPrimaryColor.withOpacity(0.23),
),
],
),
child: Row(
children: <Widget>[
Expanded(
child: TextField(
onChanged: (value) {},
decoration: InputDecoration(
hintText: "Search",
hintStyle: TextStyle(
color: kPrimaryColor.withOpacity(0.5),
),
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
),
),
),
SvgPicture.asset("assets/icons/search.svg"),
],
),
),
),
],
),
);
}
}
screens/home/components/featured_plants.dart
import 'package:flutter/material.dart';
import '../../../constants.dart';
class FeaturedPlants extends StatelessWidget {
const FeaturedPlants({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: <Widget>[
FeaturePlantCard(
image: "assets/11.png",
press: () {},
),
FeaturePlantCard(
image: "assets/12.png",
press: () {},
),
],
),
);
}
}
class FeaturePlantCard extends StatelessWidget {
const FeaturePlantCard({
Key? key,
required this.image,
required this.press,
}) : super(key: key);
final String image;
final VoidCallback press;
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return GestureDetector(
onTap: press,
child: Container(
margin: EdgeInsets.only(
left: kDefaultPadding,
top: kDefaultPadding / 2,
bottom: kDefaultPadding / 2,
),
width: size.width * 0.8,
height: 185,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(image),
),
),
),
);
}
}
screens/home/components/body.dart
import 'package:flutter/material.dart';
import 'package:example/constants.dart';
import 'featurred_plants.dart';
import 'header_with_seachbox.dart';
import 'recomend_plants.dart';
import 'title_with_more_bbtn.dart';
class Body extends StatelessWidget {
const Body({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
HeaderWithSearchBox(size: size),
TitleWithMoreBtn(title: "Recomended", press: () {}),
const RecomendsPlants(),
TitleWithMoreBtn(title: "Featured Plants", press: () {}),
const FeaturedPlants(),
const SizedBox(height: kDefaultPadding),
],
),
);
}
}screens/home/home_screen.dart
import 'package:example/constants.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:example/components/my_bottom_nav_bar.dart';
import 'package:example/screens/home/components/body.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: buildAppBar(),
body: Body(),
bottomNavigationBar: const MyBottomNavBar(),
);
}
AppBar buildAppBar() {
return AppBar(
backgroundColor: kPrimaryColor,
elevation: 0,
leading: IconButton(
icon: SvgPicture.asset("assets/icons/menu.svg"),
onPressed: () {},
),
);
}
}
screens/details/components/title_and_price.dart
import 'package:flutter/material.dart';
import '../../../constants.dart';
class TitleAndPrice extends StatelessWidget {
const TitleAndPrice({
Key? key,
required this.title,
required this.country,
required this.price,
}) : super(key: key);
final String title, country;
final int price;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: kDefaultPadding),
child: Row(
children: <Widget>[
RichText(
text: TextSpan(
children: [
TextSpan(
text: "$title\n",
style: Theme.of(context)
.textTheme
.headline4!
.copyWith(color: kTextColor, fontWeight: FontWeight.bold),
),
TextSpan(
text: country,
style: const TextStyle(
fontSize: 20,
color: kPrimaryColor,
fontWeight: FontWeight.w300,
),
),
],
),
),
const Spacer(),
Text(
"\₹$price",
style: Theme.of(context)
.textTheme
.headline5!
.copyWith(color: kPrimaryColor),
)
],
),
);
}
}screens/details/components/image_and_icons.dart
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../../../constants.dart';
import 'icon_card.dart';
class ImageAndIcons extends StatelessWidget {
const ImageAndIcons({
Key? key,
required this.size,
}) : super(key: key);
final Size size;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(bottom: kDefaultPadding * 3),
child: SizedBox(
height: size.height * 0.8,
child: Row(
children: <Widget>[
Expanded(
child: Padding(
padding:
const EdgeInsets.symmetric(vertical: kDefaultPadding * 3),
child: Column(
children: <Widget>[
Align(
alignment: Alignment.topLeft,
child: IconButton(
padding:
const EdgeInsets.symmetric(horizontal: kDefaultPadding),
icon: SvgPicture.asset("assets/icons/back_arrow.svg"),
onPressed: () {
Navigator.pop(context);
},
),
),
const Spacer(),
const IconCard(icon: "assets/icons/sun.svg"),
const IconCard(icon: "assets/icons/icon_2.svg"),
const IconCard(icon: "assets/icons/icon_3.svg"),
const IconCard(icon: "assets/icons/icon_4.svg"),
],
),
),
),
Container(
height: size.height * 0.8,
width: size.width * 0.75,
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(63),
bottomLeft: Radius.circular(63),
),
boxShadow: [
BoxShadow(
offset: const Offset(0, 10),
blurRadius: 60,
color: kPrimaryColor.withOpacity(0.29),
),
],
image: const DecorationImage(
alignment: Alignment.center,
fit: BoxFit.cover,
image: AssetImage("assets/11.png"),
),
),
),
],
),
),
);
}
}
screens/details/components/icon_card.dart
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../../../constants.dart';
class IconCard extends StatelessWidget {
const IconCard({
Key? key,
required this.icon,
}) : super(key: key);
final String icon;
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Container(
margin: EdgeInsets.symmetric(vertical: size.height * 0.03),
padding: const EdgeInsets.all(kDefaultPadding / 2),
height: 62,
width: 62,
decoration: BoxDecoration(
color: kBackgroundColor,
borderRadius: BorderRadius.circular(6),
boxShadow: [
BoxShadow(
offset: const Offset(0, 15),
blurRadius: 22,
color: kPrimaryColor.withOpacity(0.22),
),
const BoxShadow(
offset: Offset(-15, -15),
blurRadius: 20,
color: Colors.white,
),
],
),
child: SvgPicture.asset(icon),
);
}
}screens/details/components/body.dart
import 'package:flutter/material.dart';
import 'package:example/constants.dart';
import 'image_and_icons.dart';
import 'title_and_price.dart';
class Body extends StatelessWidget {
const Body({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return SingleChildScrollView(
child: Column(
children: <Widget>[
ImageAndIcons(size: size),
const TitleAndPrice(title: "Test", country: "India", price: 440),
const SizedBox(height: kDefaultPadding),
Row(
children: <Widget>[
SizedBox(
width: size.width / 2,
height: 84,
child: FlatButton(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
),
),
color: kPrimaryColor,
onPressed: () {},
child: const Text(
"Buy Now",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
),
),
Expanded(
child: FlatButton(
onPressed: () {},
child: const Text("Description"),
),
),
],
),
],
),
);
}
}screens/details/details_screen.dart
import 'package:flutter/material.dart';
import 'package:example/screens/details/components/body.dart';
class DetailsScreen extends StatelessWidget {
const DetailsScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Body(),
);
}
}