Faça uma interface de usuário do Amazon Clone App usando Flutter

Tempo de leitura: 3 minutes

Neste tutorial, vou mostrar como fazer esta interface de usuário simples, mas bonita, do Amazon Clone App. Claro, não vamos construir um aplicativo completo com serviço de back-end, método de pagamento e todas essas coisas. vamos nos concentrar apenas na IU. veremos como criar uma visualização de rolagem, como fazer uma barra de navegação inferior e como criar um widget customizado usando flutter.

 

Código fonte:

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

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: AmazonApp(),
  ));
}

class AmazonApp extends StatefulWidget {
  @override
  _AmazonAppState createState() => _AmazonAppState();
}

class _AmazonAppState extends State<AmazonApp> {
  // Aqui, vou criar um widget personalizado para a caixa de itens
  Widget Items(String name, String category, String imgUrl, String price) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: InkWell(
        // este widget tornará seu contêiner clicável
        onTap: () {},
        child: Container(
          width: 180.0,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(8.0),
          ),
          child: Column(
            children: [
              Image(
                image: NetworkImage(imgUrl),
                width: 170.0,
                height: 160.0,
                alignment: Alignment.center,
              ),
              Text(
                name,
                style: TextStyle(fontSize: 22.0),
              ),
              Text(
                category,
                style: TextStyle(
                  fontSize: 18.0,
                  color: Colors.grey,
                ),
              ),
              Text(
                "$price£",
                style: TextStyle(
                    fontSize: 22.0,
                    color: Color(
                      0xFFFF9900,
                    )),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // Agora vou importar uma lista de imagens que coletei do site Unsplash e amazon
  // você pode escolher a imagem que deseja e adicioná-la à lista
  List<String> ImgUrl = [
    "https://in.jbl.com/on/demandware.static/-/Sites-masterCatalog_Harman/default/dw4a6e76c7/C150SI-black1-hero-1605x1605px.png",
    "https://purepng.com/public/uploads/large/samsung-galaxy-s10-prism-front-6bx.png",
    "https://www.mypinnacleview.com/wp-content/uploads/2017/07/macbook-pro-png.png",
    "https://static.bhphoto.com/images/images2500x2500/1574693242_1297189.jpg",
    "https://images-na.ssl-images-amazon.com/images/I/61fTX5TjAEL._UX569_.jpg",
    "https://images-eu.ssl-images-amazon.com/images/G/31/img17/PC/sprocket/Tile-2-1._SS200_.jpg",
    "https://images-eu.ssl-images-amazon.com/images/I/51JKnkxCl7L._AC_SX184_.jpg",
    "https://images-na.ssl-images-amazon.com/images/I/710tUwxHq7L._UL1500_.jpg",
    "https://images-na.ssl-images-amazon.com/images/I/61LQQSc9fZL._UL1440_.jpg",
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF10161D),
      appBar: AppBar(
        backgroundColor: Color(0xFF222e3D),
        title: Text(
          "Amazon",
          style: TextStyle(
            color: Color(0xFFFF9900),
          ),
        ),
        centerTitle: true,
        actions: [
          FlatButton(
            onssed: () {},
            child: Icon(
              Icons.shopping_cart,
              color: Colors.white,
            ),
          )
        ],
      ),
      body: SingleChildScrollView(
        child: Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 38, vertical: 20.0),
                child: TextField(
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.all(20.0),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(4.0),
                      borderSide: BorderSide(color: Colors.transparent),
                    ),
                    prefixIcon: Icon(
                      Icons.search,
                      color: Colors.black,
                    ),
                    hintText: "Search...",
                    fillColor: Colors.white,
                    filled: true,
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: Text(
                  "New Items",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 28.0,
                  ),
                ),
              ),
              //Now we will add the items list
              Container(
                width: double
                    .infinity, // esta linha fará com que o contêiner ocupe toda a largura do dispositivo
                height:
                    270.0, // quando você quiser criar uma lista, você deve precisar a altura e largura de seu contêiner
                child: ListView(
                  scrollDirection: Axis
                      .horizontal, // isso fará com que a lista role horizontalmente
                  children: [
                    //now let's add an item to test
                    Items("JBL headphones", "Audio", ImgUrl[0], "63.3"),
                    Items("Sumsung", "Smartphones", ImgUrl[1], "633.3"),
                    Items("MacBook pro", "Tech", ImgUrl[2], "1200.56"),
                    Items("Blue yeti", "Audio", ImgUrl[3], "123.3"),
                    //Observe que esta é a IU do aplicativo, mas você pode implementar facilmente um serviço de back-end por meio de uma API REST
                  ],
                ),
              ),
              // para a segunda parte do aplicativo é o mesmo princípio, então vamos apenas copiar os primeiros elementos
              // Vamos adicionar um pouco de espaço 
              SizedBox(
                height: 20.0,
              ),

              Padding(
                padding: const EdgeInsets.all(10.0),
                child: Text(
                  "Recomendado para você",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 28.0,
                  ),
                ),
              ),
              Container(
                width: double
                    .infinity, // esta linha fará com que o recipiente ocupe toda a largura do dispositivo
                height:
                    270.0, // quando você quiser criar uma lista, você deve precisar a altura e largura de seu contêiner
                child: ListView(
                  scrollDirection: Axis
                      .horizontal, // isso fará com que a lista role horizontalmente
                  children: [
                    //agora vamos adicionar um item para testar
                    Items("Jacket", "Fashion", ImgUrl[4], "63.3"),
                    Items("IMac Pro", "Tech", ImgUrl[5], "6353.63"),
                    Items("Books", "Books", ImgUrl[6], "12.56"),
                    Items("Sunglasses", "Fashion", ImgUrl[7], "6.3"),
                    Items("Watch", "Fashion", ImgUrl[8], "600.9"),
                    //Observe que esta é a IU do aplicativo, mas você pode implementar facilmente um serviço de back-end por meio de uma API REST
                  ],
                ),
              ),
            ],
          ),
        ),
      ),

      //Agora vou adicionar uma barra de navegação inferior
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Color(0xFF10161d),
        selectedItemColor: Color(0xFFFF9900),
        unselectedItemColor: Colors.white,
        items: [
          //você deve ter pelo menos 2 itens com o ícone e título ou você terá um erro
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text("Home"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite),
            title: Text("Favorite"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text("Account"),
          ),
        ],
        //é isso para a interface do usuário, obrigado por assistir, se você quiser ver um tutorial completo
        //sobre como construir um aplicativo de compras totalmente funcional, basta colocá-lo no comentário
        //Não se esqueça de se inscrever;) <3
      ),
    );
  }
}

 

Visits: 1 Visits: 1200257