Skip to main content

Flutter - Amazon redesign reference Uplabs.

Amazon Redesign

I got a great response from my previous post ( Facebook messenger & Login UI ) so I searched on Uplabs and chosen to design the Amazon homepage.

amazon clone in flutter

As you see the screenshot, I tried my best to design this UI. Let me share the code and assets with you.
Let start with the directory.


I have created the assets folder inside that creates fonts and images folder. You will get all the images from the Github project link, don't forget to star. I have used CircularStd font and FontAwesome package in this design.
Create a screen and widget folder inside the lib folder.

Let look at the code.

pubspec.yaml
dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  font_awesome_flutter: ^8.4.0

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true

  assets:
   - assets/images/amazon_logo.png
   - assets/images/echo.png
   - assets/images/cart_icon.png
   - assets/images/button.png
   - assets/images/menu_icon.png
   - assets/images/iphone_red.png
   - assets/images/iphone_black.png

  fonts:
    - family: Bold
      fonts:
        - asset: assets/fonts/CircularStd-Bold.ttf
    - family: Medium
      fonts:
        - asset: assets/fonts/CircularStd-Medium.ttf

main.dart
import 'package:amazon_clone/screen/home_screen.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
  ));
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    ),
  );
}
Create feature.dart & header.dart file inside the widget folder.

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

class Feature extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      margin: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
      padding: EdgeInsets.all(16),
      height: 170,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.2),
            blurRadius: 4,
            spreadRadius: 2,
          )
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                height: 100,
                width: 100,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('assets/images/iphone_black.png'),
                    fit: BoxFit.fill,
                  ),
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
              SizedBox(
                width: 6,
              ),
              Container(
                height: 100,
                width: 100,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('assets/images/iphone_red.png'),
                    fit: BoxFit.fill,
                  ),
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
              SizedBox(
                width: 10,
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Text(
                    'Save',
                    style: TextStyle(
                      color: Color(0xff7a7a7a),
                      fontFamily: 'Bold',
                      fontSize: 12,
                    ),
                  ),
                  Text(
                    '25%',
                    style: TextStyle(
                      color: Color(0xffffa726),
                      fontFamily: 'Bold',
                      fontSize: 20,
                    ),
                  )
                ],
              )
            ],
          ),
          SizedBox(
            height: 5,
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                'iPhone XS 256 GB',
                style: TextStyle(
                  color: Color(0xff1f1f1f),
                  fontFamily: 'Medium',
                  fontSize: 16,
                ),
              ),
              SizedBox(
                height: 2,
              ),
              RichText(
                text: TextSpan(
                  children: [
                    TextSpan(
                      text: '859,00£',
                      style: TextStyle(
                        color: Color(0xff1f1f1f),
                        fontFamily: 'Bold',
                        fontSize: 15,
                      ),
                    ),
                    TextSpan(
                      text: ' Original price:',
                      style: TextStyle(
                        color: Color(0xff7a7a7a),
                        fontFamily: 'Bold',
                        fontSize: 14,
                      ),
                    ),
                    TextSpan(
                      text: ' 1059,00£',
                      style: TextStyle(
                        color: Color(0xff7a7a7a),
                        fontFamily: 'Bold',
                        fontSize: 14,
                        decoration: TextDecoration.lineThrough,
                      ),
                    ),
                  ],
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}
header.dart
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class Header extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Stack(
      overflow: Overflow.visible,
      children: <Widget>[
        Container(
          height: 350,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Color(0xff1e2a54),
                Color(0xff1773b3),
              ],
            ),
          ),
        ),
        Padding(
          padding: EdgeInsets.fromLTRB(16, MediaQuery.of(context).padding.top + 16, 16, 16),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Image.asset(
                'assets/images/menu_icon.png',
                fit: BoxFit.fill,
                width: 18,
              ),
              Image.asset(
                'assets/images/amazon_logo.png',
                fit: BoxFit.fill,
                width: 80,
              ),
              Image.asset(
                'assets/images/cart_icon.png',
                fit: BoxFit.fill,
                width: 20,
              ),
            ],
          ),
        ),
        Container(
          padding: EdgeInsets.all(16),
          margin: EdgeInsets.only(top: MediaQuery.of(context).padding.top + 46),
          child: Theme(
            data: ThemeData(
              hintColor: Colors.transparent,
            ),
            child: TextField(
              decoration: InputDecoration(
                hintText: 'What are you looking for?',
                hintStyle: TextStyle(
                  color: Color(0xffb4c2d3),
                  fontSize: 14,
                  fontFamily: 'Medium',
                ),
                fillColor: Colors.white,
                filled: true,
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(50),
                  borderSide: BorderSide(
                    color: Colors.transparent,
                    width: 0,
                  ),
                ),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(50),
                  borderSide: BorderSide(
                    color: Colors.transparent,
                    width: 0,
                  ),
                ),
                contentPadding: EdgeInsets.all(12),
                suffixIcon: Icon(
                  FontAwesomeIcons.search,
                  color: Color(0xffb4c2d3),
                  size: 15,
                ),
              ),
            ),
          ),
        ),
        Positioned(
          child: Image.asset(
            'assets/images/echo.png',
            fit: BoxFit.fill,
          ),
          right: 0,
          bottom: 0,
        ),
        Positioned(
          child: Text(
            'NEW',
            style: TextStyle(
              fontSize: 12,
              fontFamily: 'Bold',
              color: Color(0xffb4c2d3),
            ),
          ),
          top: 155,
          left: 16,
        ),
        Positioned(
          child: Text(
            'echo plus',
            style: TextStyle(
              fontSize: 26,
              fontFamily: 'Bold',
              color: Color(0xff00afff),
            ),
          ),
          top: 180,
          left: 16,
        ),
        Positioned(
          child: RichText(
            text: TextSpan(
              children: [
                TextSpan(
                  text: 'just',
                  style: TextStyle(
                    color: Color(0xffb4c2d3),
                    fontFamily: 'Medium',
                    fontSize: 16,
                  ),
                ),
                TextSpan(
                  text: ' 89.',
                  style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'Bold',
                    fontSize: 30,
                  ),
                ),
                TextSpan(
                  text: '99£',
                  style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'Bold',
                    fontSize: 16,
                  ),
                ),
              ],
            ),
          ),
          top: 200,
          left: 16,
        ),
        Positioned(
          child: Container(
            width: 110,
            height: 40,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(5),
              color: Colors.white,
            ),
            child: Center(
              child: Text(
                'DISCOVER',
                style: TextStyle(
                  color: Colors.black,
                  fontFamily: 'Medium',
                  fontSize: 12,
                ),
              ),
            ),
          ),
          top: 245,
          left: 16,
        ),
        Positioned(
          bottom: -40,
          left: 16,
          child: Container(
            width: MediaQuery.of(context).size.width - 32,
            height: 80,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8),
              boxShadow: [
                BoxShadow(
                  blurRadius: 4,
                  spreadRadius: 2,
                  color: Colors.black.withOpacity(0.3),
                ),
              ],
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                Container(
                  width: 40,
                  height: 40,
                  decoration: BoxDecoration(
                    color: Color(0xff4ede7b),
                    shape: BoxShape.circle,
                  ),
                  child: Center(
                    child: Icon(
                      FontAwesomeIcons.mapMarkerAlt,
                      color: Colors.white,
                      size: 18,
                    ),
                  ),
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      'Shipping address',
                      style: TextStyle(
                        color: Color(0xff7a7a7a),
                        fontFamily: 'Medium',
                        fontSize: 12,
                      ),
                    ),
                    SizedBox(
                      height: 6,
                    ),
                    Text(
                      'King Street, London, UK',
                      style: TextStyle(
                        color: Colors.black,
                        fontFamily: 'Medium',
                        fontSize: 16,
                      ),
                    )
                  ],
                ),
                Image.asset(
                  'assets/images/button.png',
                  width: 18,
                )
              ],
            ),
          ),
        )
      ],
    );
  }
}
Create home_screen.dart file inside the screen folder.

home_screen.dart
import 'package:amazon_clone/widget/feature.dart';
import 'package:amazon_clone/widget/header.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  
  Widget build(BuildContext context) {

    return Scaffold(
      resizeToAvoidBottomPadding: false,
      body: Container(
        color: Colors.white,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Header(),
            Padding(
              padding: EdgeInsets.only(left: 16, top: 70),
              child: Text(
                'Featured today',
                style: TextStyle(
                  color: Color(0xff1f1f1f),
                  fontFamily: 'Medium',
                  fontSize: 16,
                ),
              ),
            ),
            Feature()
          ],
        ),
      ),
    );
  }
}
After collecting all the piece run command "flutter run".
If you find any difficulties, I have updated the project on Github, don't forget to star the project.

Thank you for reading.

Comments

Post a Comment

Popular posts from this blog

Google Play UI design in Flutter.

GooglePlay Design
I have created a simple google play design in Flutter reference taken from Uplabs.

As you can see in the above screenshot, I have tried to implement Uplabs design. Now let see the code behind this design.
Let's talk about fonts and folder structure. Font used in the design is ProductSans-Medium.ttf, you will find the font inside the assets folder of the project don't forget to add a font in pubspec.yaml file.
Now create a model, res, screen and widget folder inside the lib folder.
Create a file songs_model.dart inside the model folder. songs_model.dart classSongsModel{ String imageUrl; String title; String singer; String duration;SongsModel({this.imageUrl,this.title,this.duration,this.singer});} Create color.dart and style.dart file inside res folder. color.dart import'dart:ui'; Color colorAppYellow =Color(0xfffcb34f); Color colorAppOrange =Color(0xfffe6b6b); Color colorBlack =Color(0xff686868); Color colorGrey =Color(0xffcacaca); style.dart import…

Flutter - Uplabs login UI design.

Uplabs Login UI   I have created a login page UI, reference taken from the Uplabs website. In the future, I will choose a more complex UI to develop in Flutter.
Before starting let see the UI of the login page.



You can choose the piece of code or widget to use in your project. I would suggest you to try it yourself if you stuck somewhere come back to get the reference.
I have used Poppins Font & FontAwesome library for the social icon.
Create a project with flutter create --org com.yourcompany -i swift -a kotlin --description 'Your App Description' app_name command. Let see the file structure.
I have created the assets folder for font and images, map the image & fonts in pubspec.yaml.
pubspec.yaml flutter:uses-material-design:trueassets:- assets/image/logo_1.png - assets/image/logo_2.png - assets/image/bg.png - assets/image/bottom_bg.png fonts:-family: Bold fonts:-asset: assets/font/Poppins-Bold.ttf -family: Medium fonts:-asset: assets/font/P…

Flutter - Facebook messenger UI.

Facebook Messenger UI I have tried to create Facebook messenger UI in Flutter, but how I choose a design to develop UI? Facebook messenger was installed on my smartphone I captured the screenshot and developed in Flutter.
Before starting the development let me show you the screenshot of Facebook messenger UI developed in Flutter.
Screenshot:


As you can see the above screenshots, only the UI part has done no functionality added. Now let jump to code and folder structures.
Under the lib folder, I have created a screen, utils & widget folder. The screen folder contains home_screen.dart file. The utils folder contains string.dart & colors.dart file, string.dart file contains the image URL used in UI. The widget folder contains chats.dart, header.dart, search.dart & story.dart files,we will use these widgets to create UI.
Now create the above folder structure with the file name. 

Now, what about fonts and libraries. I have used the Roboto font and Flutter Slidable package to co…

Flutter - State management with MobX.

MobX :-
MobX is a popular state management library. In this blog, we will explore MobX with a simple and easy example. MobX has made state management easy, by running a flutter command it will generate code for you, which makes it easy to use and learn.

Before diving into the code lets understand the basic theory.

In  MobX, we have 3 annotations to manage state.

@action.@observable.@computed.

1. Observable:-  Observable annotation is mostly used with variables which is going to change. For example, let say we have a variable named a, on button click, we want to update the variable value, the variable value getting updated based on the user action then such a variable should be used with observable.
2. Action:- Action is usually bound with methods. Taking the above scenario, if we want to update the variable on click, we need a function to update the variable, the function will be used with action annotation.
If you get confused with the above theory, don't worry we will look example …