Building a Sample Static Automobiles App in Flutter

Step 1: Setting up the project

1. Open your terminal or command prompt.
2. Navigate to the directory where you want to create your project.
3. Run the following command:

flutter create vinay_automobiles

4. Navigate into your project directory:

cd vinay_automobiles

5. Open the project in your preferred IDE.

Step 2: Adding dependencies

We'll be using Google Fonts in this project. Let's add it to our dependencies.

1. Open the pubspec.yaml file in your project root.

2. Under the dependencies section, add the following line:

dependencies:
flutter:
sdk: flutter
google_fonts: ^5.1.0

3. Save the file and run flutter pub get in the terminal.

Step 3: Setting up the main.dart file

Open the lib/main.dart file and replace its contents with:

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() {
runApp(const ScaffoldBasics());
}

This sets up the entry point of our app.

Step 4: Creating the ScaffoldBasics widget

Add the following code after the main() function:
class ScaffoldBasics extends StatelessWidget {
const ScaffoldBasics({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primaryColor: Colors.blue[100],
scaffoldBackgroundColor: Colors.blueGrey[50],
fontFamily: GoogleFonts.montserrat().fontFamily,
),
home: Scaffold(
// We'll add the Scaffold contents in the next steps
),
);
}
}

Explanation:

• ScaffoldBasics: This is the root widget of our app.

• MaterialApp: This widget is used to set up the basic structure of a material design app.
• debugShowCheckedModeBanner: false: This removes the debug banner from the top-right
corner.
• theme: Here we're setting up a custom theme for our app, including colors and font.
• Scaffold: This provides the basic material design visual layout structure.

Step 5: Adding the AppBar

Inside the Scaffold widget, add the following appBar property:

appBar: AppBar(
foregroundColor: Colors.white,
title: Text(
'Vinay Automobiles',
style: TextStyle(fontFamily: GoogleFonts.montserrat().fontFamily),
),
backgroundColor: Colors.blue[900],
centerTitle: true,
),

Explanation:

• AppBar: This widget creates a bar at the top of the screen.

• foregroundColor: This sets the color of the text and icons in the AppBar.
• title: This sets the text displayed in the center of the AppBar.
• backgroundColor: This sets the background color of the AppBar.
• centerTitle: This centers the title text.
Step 6: Creating the body of the Scaffold
Add the following body property to the Scaffold:

body: SingleChildScrollView(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// We'll add the body contents in the next steps
],
),
),

Explanation:

• SingleChildScrollView: This makes the body scrollable if its content is taller than the screen.
• padding: This adds padding around all sides of the content.
• Column: This widget displays its children in a vertical array.
• crossAxisAlignment: CrossAxisAlignment.stretch: This makes the children of the Column
stretch to fill the available horizontal space.

Step 7: Adding the store description

Create a new method _buildStoreDescription() outside of the build method:

Widget _buildStoreDescription() {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.blue[200],
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(
colors: [Colors.blue[200]!, Colors.blueAccent],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
'Welcome to Vinay Automobiles',
textAlign: TextAlign.center,
style: GoogleFonts.montserrat(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
const SizedBox(height: 10),
Text(
 'Explore our collection of luxurious and reliable automobiles. We provide
top-notch customer service and customization options to suit your needs.',
style: GoogleFonts.montserrat(
fontSize: 16,
color: Colors.white,
),
),
],
),
);
}

Now, add this widget to the Column in the body:

children: [
_buildStoreDescription(),
const SizedBox(height: 20),
// More widgets will be added here
],

Explanation:

• Container: This widget lets you customize its child widget with decorations and padding.
• BoxDecoration: This is used to decorate the Container with a gradient background and rounded
corners.
• LinearGradient: This creates a smooth color transition from one color to another.
• Column: This is used to arrange the text widgets vertically.
• Text: These widgets display the store description text.
• GoogleFonts.montserrat(): This applies the Montserrat font to the text.

Step 8: Adding the services section

Create a new method _buildServices():

Widget _buildServices() {
return Card(
elevation: 5,
margin: const EdgeInsets.symmetric(vertical: 10),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Our Services',
style: GoogleFonts.montserrat(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
const SizedBox(height: 10),
Text(
'1. Car Sales\n'
 '2. Maintenance Services\n'
'3. Customization Options\n'
'4. 24/7 Customer Support',
style: GoogleFonts.montserrat(
fontSize: 16,
color: Colors.black,
),
),
],
),
),
);
}

Add this widget to the Column in the body:

children: [
_buildStoreDescription(),
const SizedBox(height: 20),
_buildServices(),
const SizedBox(height: 20),
// More widgets will be added here
],

Explanation:

• Card: This widget creates a material design card with a slight elevation and rounded corners.
• elevation: This property adds a shadow to the card, making it appear raised.
• Padding: This widget adds padding inside the card.

Step 9: Creating helper methods for product sections

Add these methods outside the build method:

Widget _buildSectionTitle(String title) {

return Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text(
title,
style: GoogleFonts.montserrat(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
)
);
}

Widget _buildHorizontalProductList(List<Widget> products) {

return SizedBox(
height: 300,
child: ListView(
 scrollDirection: Axis.horizontal,
children: products,
),
);
}

Widget _buildProductCard(
String title, String subtitle, String imagePath, BuildContext context) {
return Card(
elevation: 5,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
child: SizedBox(
width: 300,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClipRRect(
borderRadius:
const BorderRadius.vertical(top: Radius.circular(10)),
child: Image.asset(
imagePath,
height: 175,
width: double.infinity,
fit: BoxFit.cover,
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Text(
title,
style: GoogleFonts.montserrat(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.black,
),
)
),
const SizedBox(height: 4),
Center(
child: Text(
subtitle,
style: GoogleFonts.montserrat(
fontSize: 14,
fontWeight: FontWeight.w300,
color: Colors.black,
),
)
),
const SizedBox(height: 8),
Center(
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue[200],
 shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
child: Text(
'View Details',
style: GoogleFonts.montserrat(
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
),
],
),
),
);
}

Explanation:

• _buildSectionTitle: This creates a centered title for each section.

• _buildHorizontalProductList: This creates a horizontal scrollable list of products.
• _buildProductCard: This creates a card for each product with an image, title, subtitle, and a
button.

Step 10: Adding product sections

Now, add the following to the Column in the body:

children: [
_buildStoreDescription(),
const SizedBox(height: 20),
_buildServices(),
const SizedBox(height: 20),
_buildSectionTitle('New Arrivals'),
_buildHorizontalProductList([
_buildProductCard(
'Tesla Model S',
'Electric Sedan',
'assets/tesla_model_s.jpg',
context,
),
_buildProductCard(
'Ford Mustang',
'Sports Car',
'assets/ford_mustang.jpg',
context,
),
_buildProductCard(
'Audi Q5',
'Luxury SUV',
 'assets/audi_q5.jpg',
context,
),
]),
const SizedBox(height: 20),
_buildSectionTitle('Top Products'),
_buildHorizontalProductList([
_buildProductCard(
'BMW X5',
'Luxury SUV',
'assets/bmw_x5.jpg',
context,
),
_buildProductCard(
'Toyota Camry',
'Sedan',
'assets/toyota_camry.jpg',
context,
),
_buildProductCard(
'Honda Civic',
'Compact Car',
'assets/honda_civic.jpg',
context,
),
]),
const SizedBox(height: 20),
_buildSectionTitle('For You'),
_buildHorizontalProductList([
_buildProductCard(
'Mercedes-Benz C-Class',
'Luxury Sedan',
'assets/mercedes_c_class.jpg',
context,
),
_buildProductCard(
'Volkswagen Golf GTI',
'Hot Hatch',
'assets/vw_golf_gti.jpg',
context,
),
_buildProductCard(
'Lamborghini Urus',
'Super SUV',
'assets/lamborghini_urus.jpg',
context,
),
]),
const SizedBox(height: 20),
],

Note: You'll need to add these images to your assets folder and declare them in your pubspec.yaml file.

Step 11: Adding a FloatingActionButton

Add the following property to the Scaffold:
floatingActionButton: FloatingActionButton(
onPressed: () => () {},
backgroundColor: Colors.blueAccent,
child: const Icon(Icons.car_rental),
),

Explanation:

• FloatingActionButton: This creates a circular button that floats above the content of the app.
• onPressed: This defines what happens when the button is pressed (currently empty).
• backgroundColor: This sets the background color of the button.
• child: This sets the icon displayed on the button.

Step 12: Adding a Drawer

Add the following property to the Scaffold:

drawer: Drawer(
child: ListView(
children: [
DrawerHeader(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.blue,
Colors.blueAccent,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: Center(
child: Text(
'Vinay Automobiles',
style: GoogleFonts.montserrat(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
_buildDrawerItem(context, icon: Icons.home, label: 'Home'),
_buildDrawerItem(context, icon: Icons.shop, label: 'Shop'),
_buildDrawerItem(context, icon: Icons.person, label: 'Profile'),
_buildDrawerItem(context, icon: Icons.info, label: 'About'),
],
),
),

Also, add this helper method:

Widget _buildDrawerItem(BuildContext context,

{required IconData icon, required String label}) {
 return ListTile(
title: TextButton(
onPressed: () {},
child: Row(
children: [
Icon(icon, color: Colors.black),
const SizedBox(width: 16),
Text(
label,
style: GoogleFonts.montserrat(
fontSize: 14,
color: Colors.black,
),
),
],
),
),
);
}

Explanation:

• Drawer: This creates a side menu that can be opened by swiping from the left edge of the screen
or tapping the menu icon in the App