초보자를 위한 Flutter로 복잡한 UI를 빌드하는 방법 — Cart Screen

이 시리즈의 소개를 확인할 수 있습니다. 우리의 목표는 모든 모바일 앱 목업을 분석하는 방법을 이해하고 초보자부터 고급 수준까지 반응형으로 구축하는 것입니다.

비교적 간단한 화면인 장바구니 화면부터 시작하겠습니다.

위와 같은 모바일 앱 목업은 일반적으로 행과 열로 구성되며 이를 식별하는 방법을 이해하는 것이 목업을 만들기 위한 기초입니다. Flutter에서는 이를 위젯이라고 설명합니다. 행 및 열 위젯이 무엇인지 먼저 이해하겠습니다.

In simple terms, a Row is a widget that takes other widgets as children and align them horizontally. Column widget also accept other widgets as children but align them vertically.

장바구니 페이지를 행과 위젯으로 나누자

첫 번째 행을 가져 가자



이 첫 번째 행에는 Text('My Cart') 위젯과 Icon() 위젯이라는 두 개의 위젯이 자식으로 있습니다.

두 번째 줄을 보자



두 번째 행에도 행 및 컨테이너 위젯인 하위 위젯이 있습니다.

My Cart 화면에서 모든 Row 위젯이 세로로 정렬되거나 서로 세로로 배치되어 일반 구조가 Column 위젯이 됩니다.

더 나은 이해를 위해 위의 두 번째 행을 분석해 보겠습니다. 여기에는 Row와 Container라는 두 개의 하위 위젯이 있습니다.

행 위젯에는 이미지와 열 위젯이라는 두 개의 자식이 있습니다.



컨테이너 위젯은 행 위젯을 사용하며 이 행 위젯에는 아이콘, 텍스트 및 아이콘 위젯의 세 가지 하위 항목이 있습니다.



My Cart 화면의 마지막 Row를 분석해보자



이 행에는 열과 컨테이너라는 두 개의 하위 항목도 있습니다. 열 위젯에는 두 개의 텍스트 위젯이 있습니다. 컨테이너 위젯에는 자식으로 텍스트 위젯이 있습니다.

전체 코드에 대한 github 링크를 드롭하겠습니다. 버튼을 포함하여 장바구니 화면의 모든 것이 처음부터 만들어졌습니다. 사용된 색상은 헥스 색상입니다. 화면과 위젯(재사용 가능한 위젯이 여기에 작성됨)의 두 폴더가 있으며 색상 파일과 프로젝트가 실행되는 기본 파일이었습니다.

장바구니 화면 페이지입니다.

import 'package:flutter/material.dart';
import 'package:mobile_ui_screen_series/colors.dart';
import 'package:mobile_ui_screen_series/widgets/my_cart_items_constainer.dart';

class MyCartScreen extends StatelessWidget {
  const MyCartScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: double.maxFinite,
        color: AppColors.myCartBackgroundColor,
        child: Center(
          child: Container(
            decoration: BoxDecoration(
                color: AppColors.backgroundColor,
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(25),
                    topRight: Radius.circular(25))),
            padding: EdgeInsets.all(10),
            width: 400,
            height: 450,
            child: Column(
              children: [
                const SizedBox(
                  height: 30,
                ),
                // row of text and icon
                Row(
                  children: const [
                    Expanded(
                      child: Center(
                        child: Text(
                          'My Cart',
                          style: TextStyle(
                              color: AppColors.darkText,
                              fontSize: 20,
                              fontWeight: FontWeight.bold),
                        ),
                      ),
                    ),
                    Icon(
                      Icons.close,
                      color: AppColors.lightBlue,
                      size: 30,
                    ),
                  ],
                ),

                // column of image, text and button
                SizedBox(
                  height: 20,
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    MyCartItemsContainer(
                        image: 'assets/images/snicker.png',
                        itemName: 'Nike Sneaker',
                        itemPrice: 'NGN250,000',
                        itemQuantity: '2'),
                    MyCartItemsContainer(
                        image: 'assets/images/apple.png',
                        itemName: 'Apple Laptop',
                        itemPrice: 'NGN350,000',
                        itemQuantity: '1'),
                    MyCartItemsContainer(
                        image: 'assets/images/lady.png',
                        itemName: 'Nike Sneaker',
                        itemPrice: 'NGN50,000',
                        itemQuantity: '1')
                  ],
                ),
                SizedBox(
                  height: 50,
                ),
                // row of text and button
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    // column of text
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Total',
                          style: TextStyle(
                              fontSize: 16, color: AppColors.lightBlue),
                        ),
                        Text(
                          'NGN750,000',
                          style: TextStyle(
                              color: AppColors.darkText,
                              fontSize: 20,
                              fontWeight: FontWeight.bold),
                        )
                      ],
                    ),
                    // button
                    Container(
                      padding: EdgeInsets.all(15),
                      width: 150,
                      height: 50,
                      decoration: BoxDecoration(
                          color: AppColors.lightBlue,
                          borderRadius: BorderRadius.circular(25)),
                      child: Text(
                        'Checkout',
                        style: TextStyle(
                            color: AppColors.backgroundColor,
                            fontWeight: FontWeight.bold),
                        textAlign: TextAlign.center,
                      ),
                    )
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

두 번째 행(이미지는 위에 있음)이 세 번 반복되는 것을 알 수 있습니다. 그래서 우리는 widgets 폴더에 위젯을 생성하고 장바구니 화면 페이지에 재사용 가능한 위젯으로 추가했습니다.

import 'package:flutter/material.dart';
import 'package:mobile_ui_screen_series/colors.dart';

class MyCartItemsContainer extends StatelessWidget {
  MyCartItemsContainer(
      {Key? key,
      required this.image,
      required this.itemName,
      required this.itemPrice,
      required this.itemQuantity})
      : super(key: key);
  String image;
  String itemName;
  String itemPrice;
  String itemQuantity;
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: 20),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          //a  row of image and text
          Row(
            children: [
              Image(fit: BoxFit.cover, image: AssetImage(image)),
              SizedBox(
                width: 15,
              ),
              Column(
                children: [
                  Text(
                    itemName,
                    style: TextStyle(
                        color: AppColors.lightBlue,
                        fontSize: 16,
                        fontWeight: FontWeight.bold),
                  ),
                  SizedBox(
                    height: 5,
                  ),
                  Text(
                    itemPrice,
                    style: TextStyle(
                      color: AppColors.darkText,
                      fontSize: 16,
                      //fontWeight: FontWeight.bold
                    ),
                  )
                ],
              ),
            ],
          ),
          // button
          Container(
            padding: EdgeInsets.all(8),
            width: 100,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                border: Border.all(color: AppColors.lightBlue)),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Icon(
                  Icons.remove,
                  size: 15,
                  color: AppColors.lightBlue,
                ),
                Text(
                  itemQuantity,
                  style: TextStyle(
                    fontSize: 20,
                    color: AppColors.lightBlue,
                  ),
                ),
                Icon(
                  Icons.add,
                  size: 15,
                  color: AppColors.lightBlue,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

마지막으로 색상 파일이 있습니다.

import 'package:flutter/material.dart';

class AppColors {
  static const Color backgroundColor = Color(0xFFFFFFFF);
  static const Color lightBlue = Color(0xFF4C9EEB);
  static const Color darkText = Color(0xFF14171F);
  static const Color myCartBackgroundColor = Color(0xFfE5E5E5);
}

우리는 다른 화면을 그릴 것입니다. 이 첫 번째 에피소드에서 우리의 초점은 응답성이 아니라 Column 및 Row 위젯을 식별하는 방법입니다.

가르치게 되어 기쁩니다. 어떤 질문이든 버리실 수 있으며 개인적인 도움이 필요하시면 우편을 요청할 수 있습니다.

코드 다운로드: Github link .

더 많은 에피소드를 보려면 팔로우하세요.