"Flutter Tutorial: Build a Social + E-commerce App (Step 1: Splash Screen)"

 today I’ll give you a complete step-by-step plan   from start to finish for your Social + E-   commerce mobile app..

Step 1:  Splash Screen:- 

Title: Splash Screen

Description:

• Appears when the app opens.

• Displays app logo and theme.

• Clean, minimal design to make a good first impression.     

     

Flutter Code:  splash_screen.dart

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

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(seconds: 3), () {
      Navigator.pushReplacement(
          context, MaterialPageRoute(builder: (context) => HomeFeed()));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image.asset('assets/images/splash.png', width: 200),
      ),
    );
  }
}




_---------------------------------------------------------------------------------------_

Step 2: Login / Signup Screen
Title: Login / Signup
Description:

Allows users to log in or create an account.
Includes email/password fields and social login buttons.


Flutter Code: login_screen.dart
import 'package:flutter/material.dart';
import 'home_feed.dart';

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset('assets/images/login_bg.png', height: 150),
            SizedBox(height: 20),
            TextField(decoration: InputDecoration(labelText: 'Email')),
            SizedBox(height: 10),
            TextField(decoration: InputDecoration(labelText: 'Password')),
            SizedBox(height: 20),
            ElevatedButton(
                onPressed: () {
                  Navigator.pushReplacement(context,
                      MaterialPageRoute(builder: (context) => HomeFeed()));
                },
                child: Text('Login')),
            SizedBox(height: 10),
            Text('Or login with social accounts')
          ],
        ),
      ),
    );
  }
}


_-----------------------------------------------------------------------------------------_
Step 3: Home Feed Screen
Title: Home Feed
Description:

Main feed of the app.
Shows social posts and recommended products.

Flutter Code: home_feed.dart
import 'package:flutter/material.dart';
import 'product_list.dart';

class HomeFeed extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Feed')),
      body: ListView(
        children: [
          Image.asset('assets/images/social_post1.png', height: 200),
          SizedBox(height: 10),
          Image.asset('assets/images/product1.png', height: 150),
          SizedBox(height: 10),
          Image.asset('assets/images/product2.png', height: 150),
        ],
      ),
    );
  }
}


_____________________________________________________________________________


Step 4: Product Listing Screen
Title: Product Listing
Description:

Displays all products in a grid layout.
Shows product image, name, and price.


Flutter Code: product_list.dart
import 'package:flutter/material.dart';
import 'product_detail.dart';

class ProductList extends StatelessWidget {
  final List<Map<String, String>> products = [
    {'image': 'assets/images/product1.png', 'name': 'Product 1', 'price': '\$29'},
    {'image': 'assets/images/product2.png', 'name': 'Product 2', 'price': '\$49'},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Products')),
      body: GridView.builder(
        padding: EdgeInsets.all(10),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2, crossAxisSpacing: 10, mainAxisSpacing: 10),
        itemCount: products.length,
        itemBuilder: (context, index) {
          return GestureDetector(
            onTap: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) =>
                          ProductDetail(product: products[index])));
            },
            child: Card(
              child: Column(
                children: [
                  Image.asset(products[index]['image']!, height: 100),
                  Text(products[index]['name']!),
                  Text(products[index]['price']!,
                      style: TextStyle(color: Colors.green)),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}



_____________________________________________________________________________________________

Step 5: Product Detail Screen
Title: Product Detail
Description:

Shows product image, description, price, and “Add to Cart” button.

Flutter Code:  product_detail.dart
import 'package:flutter/material.dart';

class ProductDetail extends StatelessWidget {
  final Map<String, String> product;
  ProductDetail({required this.product});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(product['name']!)),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          children: [
            Image.asset(product['image']!, height: 200),
            SizedBox(height: 10),
            Text(product['name']!, style: TextStyle(fontSize: 22)),
            Text(product['price']!, style: TextStyle(fontSize: 18, color: Colors.green)),
            SizedBox(height: 20),
            ElevatedButton(onPressed: () {}, child: Text('Add to Cart'))
          ],
        ),
      ),
    );
  }
}



_____________________________________________________________________________________________


Step 6: Profile Screen
Title: User Profile
Description:

Displays user avatar, name, settings, and purchase history.

Flutter Code: profile_screen.dart

import 'package:flutter/material.dart';

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Profile')),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          children: [
            CircleAvatar(radius: 50, backgroundImage: AssetImage('assets/images/user_avatar.png')),
            SizedBox(height: 10),
            Text('John Doe', style: TextStyle(fontSize: 22)),
            SizedBox(height: 10),
            Text('Purchase History', style: TextStyle(fontSize: 18)),
            // Here you can add purchase history list
          ],
        ),
      ),
    );
  }
}



_____________________________________________________________________________________________


Step 7: Cart & Checkout Screen
Title: Cart & Checkout
Description:

Shows items in the cart, total price, and a checkout button.

Flutter Code: cart_checkout.dart
import 'package:flutter/material.dart';

class CartCheckout extends StatelessWidget {
  final List<Map<String, String>> cartItems = [
    {'name': 'Product 1', 'price': '\$29'},
    {'name': 'Product 2', 'price': '\$49'},
  ];

  @override
  Widget build(BuildContext context) {
    double total = cartItems.fold(0, (sum, item) => sum + double.parse(item['price']!.substring(1)));

    return Scaffold(
      appBar: AppBar(title: Text('Cart')),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          children: [
            ...cartItems.map((item) => ListTile(
                  title: Text(item['name']!),
                  trailing: Text(item['price']!),
                )),
            SizedBox(height: 20),
            Text('Total: \$${total.toStringAsFixed(2)}', style: TextStyle(fontSize: 20)),
            SizedBox(height: 20),
            ElevatedButton(onPressed: () {}, child: Text('Checkout'))
          ],
        ),
      ),
    );
  }
}



_____________________________________________________________________________________________
 Step 8: Public Showcase


Build Web Version with Flutter:

           flutter build web

Upload to any hosting (Netlify, Firebase, GitHub Pages)
Add screenshots from Gemeni AI for better presentation

_---________________________________________________________________________________---_
         Project Folder Structure
CSS:-
social_ecommerce_app/
│├── lib/
│   ├── main.dart
│   ├── splash_screen.dart
│   ├── login_screen.dart
│   ├── home_feed.dart
│   ├── product_list.dart
│   ├── product_detail.dart
│   ├── profile_screen.dart
│   └── cart_checkout.dart
│
├── assets/
│   └── images/
│       ├── splash.png
│       ├── login_bg.png
│       ├── social_post1.png
│       ├── product1.png
│       ├── product2.png
│       └── user_avatar.png
│
├── pubspec.yaml
└── README.md

Step 1: pubspec.yaml
Make sure your pubspec.yaml includes the assets folder:
YAML
name: social_ecommerce_app
description: A social + e-commerce mobile app
version: 1.0.0+1

environment:
  sdk: ">=2.18.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2

flutter:
  uses-material-design: true

  assets:
    - assets/images/


   ___________________________________________________________________________________
 
          Project Description:
   Short Description (for Play Store / meta description / snippet):
SocialCart is a modern mobile app combining social networking and e-commerce. Discover
 trending products, share posts with friends, and shop seamlessly in one app.

   Full Description (for website / project showcase):
SocialCart is an innovative mobile application that brings together the best of social 
networking and e-commerce. With SocialCart, users can:
Discover trending products in a clean, modern interface
Share posts and updates with friends
Browse product listings with images, prices, and detailed descriptions
View product details and add items to their cart easily
Manage their profile with personal information and purchase history
Checkout securely and track orders



The app is designed with modern UI/UX principles, providing a smooth and
 intuitive experience. Each screen is visually appealing, responsive, and user-friendly.
 SocialCart is perfect for users who want to connect with friends while shopping online, 
all in one app.

Key Features:
 (1)   Social Feed – Stay updated with friends and trending posts.
 (2)   Product Listing – Browse products in a clean, organized grid 
 (3)   Product Detail – View product images, descriptions, prices, and add to cart.
 (4)   Profile – Personal account management with purchase history.
        Cart & Checkout – Easy and secure purchasing process.
 (5)   Modern UI/UX – Minimal design, responsive layouts, and high-quality visuals.

___________________________________________________________________________________________

         MY PORTFOLIO CLICK HERE :- 👇👇👇👇