Create a Full Fledge AliExpress Clone App Using Flutter

AliExpress is a popular Chinese e-commerce platform owned by Alibaba Group, where manufacturers and distributors can sell all kinds of products to customers around the world. It has become one of the largest online B2C marketplaces, with over 150 million monthly active users.

A clone app refers to an application that is developed based on another existing successful application to provide similar functionality and user experience. In this article, we will see how to create a fully functional AliExpress clone application using Flutter framework.

Flutter is an open-source mobile application development framework created by Google. It allows developing high-performance, native applications for Android and iOS from a single codebase. Some key advantages of using Flutter include hot reload for faster iteration, rich set of UI widgets, good performance and high quality native experience. To know more visit: https://zipprr.com/aliexpress-clone/

UI Design and Layout

First, we need to design mockups for important screens like home, product listing, product details etc. This will help visualize the app flow and structure.

We will use Flutter widgets like Container, Row, Column to layout the UI. Container allows wrapping widgets and adding padding/margins. Row and Column help arrange child widgets horizontally and vertically.

Some commonly used widgets include:

AppBar - For app bar at the top
ListView - To display scrollable list of items
GridView - To display items in grid format
Image - To display product images
Text - To display text content
Icons - For toolbar icons

Scaffold(
  appBar: AppBar(), 
  body: GridView.builder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
     itemBuilder: (context, index) {
       return Container(
         child: Image.network(productList[index].imageUrl),
       );
     },
  ),
)

Database Design

We will use Firebase as our backend database and storage. Some key models defined are:

// Product model 
class Product {
  String id;
  String title;
  String imageUrl;
  double price;
}

// User model
class User {
  String id;
  String name;
  String email;
  String profilePic;
}

// Order model
class Order {
  String id; 
  String userId;
  List<dynamic> products;
  double total;
  OrderStatus status;
}

Firebase services will be used to perform CRUD operations - add, get, update, delete data.

Implement Authentication

We will integrate Firebase Authentication for handling user sign up and login.

Add sign up and login screens with email/password field:

// signup_screen.dart

RaisedButton(
  onPressed: () async {
    await FirebaseAuth.instance.createUserWithEmailAndPassword(
      email: emailController.text, 
      password: passwordController.text
    );
  }, 
  child: Text("Sign Up"),
)

After successful authentication, we can fetch user details from Firebase and save in local storage:

// home_screen.dart

void initState() {
  super.initState();

  FirebaseAuth.instance.authStateChanges().listen((user) {
    if (user != null) {
      // user signed in
    }
  });
}

Product Models and Details

We will create a Product model class to store product details:

class Product {
  String id;
  String title;
  String imageUrl; 
  double price;

  Product({this.id, this.title, this.imageUrl, this.price});
}

Hardcode some sample products or fetch from Firestore:

List<Product> products = [
  Product(
    id: 'p1',
    title: 'Smartphone', 
    imageUrl: 'image.jpg',
    price: 200
  ),
  //...
];

Display products in grid and on tapping show product details screen:

GridView.builder(
  itemCount: products.length,  
  itemBuilder: (context, index) {
    return GestureDetector(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (_) => ProductDetails(product: products[index]) 
          )
        ); 
      },
      child: Image.network(products[index].imageUrl) 
    );
  }
)

Product Listing

We will use GridView to display list of products in grid format. Some key implementation includes:

Build tiles with Container, Image and Text widgets
Fetch real products from Firestore on app launch
Add scroll/pull to refresh functionality
Implement search, filters etc using TextEditingController

GridView.builder(
  itemCount: searchProducts.length,
  gridDelegate: 
     SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  itemBuilder: (context, index) {
    return ProductTile(product: searchProducts[index]); 
  }
)

Shopping Cart

Define a Cart model class with product ID and quantity
Add/remove products to list on button clicks
Persist cart data locally using shared_preferences
Display cart badge with count
View cart and handle updates using Stream Builder

class CartModel {
  String productId;
  int quantity;

  CartModel({this.productId, this.quantity});
}

List<CartModel> cart = []; 

void addToCart(Product product) {
  // add to cart list
  saveCart();
}

Checkout & Payment

Implement multi-step checkout flow:

Address screen to enter shipping details
Payment screen for adding cards
Confirmation screen on success

We will integrate with Stripe for accepting payments.

RaisedButton(
  onPressed: () async {
    StripePayment.paymentRequestWithCardForm(
      // parameters
    ).then((status) {
      if(status == PaymentStatus.success) {
        // payment success
      } 
    });
  },
  child: Text("Pay Now"),
)

Orders & Order History

On payment success:

Save order data to Firestore collection with items, total etc
Display order summary
Allow tracking order status updates
View past orders from user profile

StreamBuilder(
  stream: FirebaseFirestore.instance
      .collection('orders')
      .where('userId', isEqualTo: currentUser.id)
      .snapshots(),
  builder: (context, streamSnapshot) {
    return ListView.builder(
      itemCount: orders.length,
      itemBuilder: (context, index) {
        return OrderCard(order: orders[index]);
      },
    );
  },
)

User Profile

Key components:

Personal details editing form
Order history tab
Favorites/wishlist feature
Photo/avatar upload/change
Saved address management

return Scaffold(
  body: SingleChildScrollView(
    child: Column(
      children: [
        // personal details
        // orders list  
        // address list
      ],
    ),
  ),
);

Deployment

Setup CI/CD using GitHub Actions
Build debug/release APKs
Deploy to Firebase for hosting backend
Publish to Play Store using app signing key

Configure firebase.json:

{
  "hosting": {
    "public": "build/app",
    "ignore": [...]
  }
}

Conclusion

In this article, we learned how to build a fully functional e-commerce clone of AliExpress using Flutter framework. Key aspects covered include UI design, database modeling, authentication, payments integration, app deployment etc. This serves as a reference for anyone looking to build an online marketplace mobile app. There is scope for many enhancements including wishlists, reviews, live chat, seller features etc. The source code is available on GitHub for reference.