초보자를 위한 Flutter로 복잡한 UI를 구축하는 방법 — 주문 화면 추적

이 에피소드에서 우리는 또 다른 간단한 UI를 코딩할 것입니다. 우리의 목표는 모든 초보자가 단순하거나 복잡한 UI를 분석하고 코딩하는 방법을 이해하도록 돕는 것입니다.
이 시리즈의 두 번째 화면입니다. 원하는 경우 에피소드를 확인할 수 있습니다. 모든 것이 켜져 있습니다github .

프로젝트에는 두 개의 폴더와 두 개의 개별 파일이 있습니다. 폴더는 스크린(모든 스크린 또는 페이지 포함) 및 위젯(재사용 가능한 위젯 포함), 색상 파일 및 기본 파일입니다. 앱 전체에서 사용되는 모든 색상은 색상 파일에 있으며 앱은 기본 파일에서 실행됩니다.

화면을 분석하자
앱 바인 첫 번째 행이 있습니다.



앱 바에는 선행 아이콘과 중앙 텍스트 위젯이 있습니다.

      AppBar(
        backgroundColor: AppColors.backgroundColor,
        centerTitle: true,
        leading: const Icon(
          Icons.arrow_back_ios_new,
          color: AppColors.lightBlue,
        ),
        foregroundColor: AppColors.darkText,
        elevation: 0,
        title: const Text(
          'Track Order',
          style: TextStyle(color: AppColors.darkText),
        ),
        // leading: Icon(),
      ),

화면 전체에 패딩을 적용하기 위해 본체를 컨테이너로 감쌌습니다.

화면의 내용을 제대로 확인하면 위젯이 세로로 정렬되어 있음을 알 수 있습니다. 이렇게 하면 일반 콘텐츠가 열 위젯이 됩니다. 우리가 정의한 것처럼 열 위젯에는 수직으로 정렬된 자식이 있습니다.

코드를 보기 전에 본문의 내용을 빠르게 분석하자

열 위젯의 첫 번째 하위 위젯은 열입니다. 이 열에는 중앙에 정렬된 두 개의 하위 텍스트 위젯이 있습니다.



텍스트 위젯을 자식으로 포함하는 컨테이너 위젯을 만들었습니다. 전체 너비를 제공하고 텍스트를 왼쪽에 정렬할 수 있도록 컨테이너를 만들었습니다. 다이어그램은 아래에 있습니다.



그 옆에는 두 개의 텍스트 위젯으로 구성된 행 위젯이 있습니다. 주축 정렬을 사용하여 가로로 분리했습니다. 아래 다이어그램



그런 다음 하단에 텍스트가 있는 이미지가 있습니다. 이를 위해 재사용 가능한 위젯을 만들었습니다. 아래 다이어그램



마지막으로 버튼입니다. 이를 위해 텍스트 행과 아이콘 위젯을 자식으로 포함하는 컨테이너를 만들었습니다.



이것이 앱의 일반적인 구조입니다. 코드는 다음과 같습니다.

첫 번째는 색상 파일의 코드입니다.

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);
  static const Color inProgressColor = Color(0xFFEBB300);
}

그런 다음 버튼에 대한 코드

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

class ImageAndText extends StatelessWidget {
  ImageAndText({Key? key, required this.image, required this.text})
      : super(key: key);
  String image;
  String text;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
            width: 110,
            height: 90,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0),
                image: DecorationImage(
                    fit: BoxFit.cover, image: AssetImage(image)))),
        const SizedBox(
          height: 10,
        ),
        Text(
          text,
          style: const TextStyle(color: AppColors.lightBlue),
        )
      ],
    );
  }
}

트랙 주문 화면도 있습니다.

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.backgroundColor,
      appBar: AppBar(
        backgroundColor: AppColors.backgroundColor,
        centerTitle: true,
        leading: const Icon(
          Icons.arrow_back_ios_new,
          color: AppColors.lightBlue,
        ),
        foregroundColor: AppColors.darkText,
        elevation: 0,
        title: const Text(
          'Track Order',
          style: TextStyle(color: AppColors.darkText),
        ),
        // leading: Icon(),
      ),
      body: Container(
        padding: EdgeInsets.all(20),
        width: double.maxFinite,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
// column of text and images
            Column(
              children: [
                // Column of text
               const  SizedBox(
                  height: 40,
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: const [
                    Text(
                      'Your Order is on its way',
                      style: TextStyle(
                          color: AppColors.darkText,
                          fontWeight: FontWeight.bold,
                          fontSize: 25),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    Text('Order will arrive in 3 days',
                        style: TextStyle(
                          fontSize: 16,
                        )),
                  ],
                ),
               const SizedBox(
                  height: 30,
                ),
                // Container Text
                Container(
                  width: double.infinity,
                  child: const Text(
                    'Products',
                    textAlign: TextAlign.left,
                    style: TextStyle(
                        fontSize: 16,
                        color: AppColors.darkText,
                        fontWeight: FontWeight.w500),
                  ),
                ),
                const SizedBox(
                  height: 30,
                ),

                // Row of text
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: const [
                    Text(
                      '#90876532',
                      style: TextStyle(
                          // fontSize: 16,
                          color: AppColors.darkText,
                          fontWeight: FontWeight.w500),
                    ),
                    Text(
                      'In progress',
                      style: TextStyle(color: AppColors.inProgressColor),
                    ),
                  ],
                ),
                const SizedBox(
                  height: 30,
                ),
                // Row
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    // column of image and text
                    ImageAndText(
                        image: 'assets/images/snicker.png',
                        text: 'Nike Sneaker'),
                    ImageAndText(
                        image: 'assets/images/apple.png', text: 'Apple Laptop'),
                    ImageAndText(
                        image: 'assets/images/lady.png', text: 'Lady Shoe')
                  ],
                ),
              ],
            ),

            // container button
            Container(
              width: double.infinity,
              padding: EdgeInsets.symmetric(horizontal: 10, vertical: 15),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: AppColors.lightBlue),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                  Text(
                    'Container',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        color: AppColors.backgroundColor, fontSize: 20),
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Icon(
                    Icons.arrow_forward,
                    color: AppColors.backgroundColor,
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

마지막으로 메인 파일입니다.

import 'package:flutter/material.dart';
import 'package:mobile_ui_screen_series/screens/track_order_screen.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        home: TrackOrderScreen());
  }
}

읽어 주셔서 감사합니다. 당신이 이해했는지 확인하게 되어 기쁩니다. 질문을 던지셔도 되고, 어려운 UI 목업이 있으면 어떻게 하는지 안내해 드릴 수 있습니다.

Github 링크here