Как создавать сложные пользовательские интерфейсы с помощью Flutter для начинающих — Экран заказа трека

В этом эпизоде мы будем кодировать еще один простой пользовательский интерфейс. Наша цель — помочь каждому новичку понять, как анализировать и кодировать любой пользовательский интерфейс, как простой, так и сложный.
Это второй экран в этой серии. Вы можете посмотреть первый эпизод, если хотите. Все находится на github.

Проект состоит из двух папок и двух отдельных файлов. Папки — это screens (содержит все экраны или страницы) и widget (содержит многоразовые виджеты), файл colors и основной файл. Все цвета, используемые в приложении, находятся в файле colors, а само приложение запускается в основном файле.

Давайте проанализируем экран
У нас есть первая строка, которая является панелью приложений.

Панель приложений имеет ведущую иконку и центрированный текстовый виджет

      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(),
      ),
Вход в полноэкранный режим Выход из полноэкранного режима

Мы обернули тело контейнером, чтобы применить padding ко всему экрану.

Если вы проверите содержимое экрана должным образом, вы заметите, что виджеты выровнены по вертикали. Это делает общее содержимое виджетом колонки. Как мы и определили, виджеты Column имеют дочерние элементы, которые выровнены по вертикали.

Давайте быстро проанализируем содержимое тела, прежде чем мы рассмотрим код.

Первым дочерним виджетом виджета колонки является колонка. У этой колонки есть два дочерних текстовых виджета, которые выровнены по центру.

Мы создали виджет-контейнер, дочерним виджетом которого является текстовый виджет. Мы создали контейнер, чтобы дать ему полную ширину и выровнять текст по левому краю. Диаграмма показана ниже

Рядом находится виджет Row, состоящий из двух текстовых виджетов. Мы использовали выравнивание по главной оси, чтобы разделить их по горизонтали. Диаграмма ниже

Затем у нас есть изображение с текстом внизу. Для этого мы создали многоразовый виджет. Диаграмма ниже

И наконец, кнопка. Для нее мы создали контейнер с рядом виджетов текста и иконок в качестве дочерних элементов.

Такова общая структура приложения. Код приведен ниже;

Сначала приведем код для файла цветов

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());
  }
}

Войти в полноэкранный режим Выход из полноэкранного режима

Спасибо, что прочитали. Мне очень приятно убедиться, что вы все поняли. Вы можете задавать вопросы, и если у вас возникнут сложности с макетом пользовательского интерфейса, я подскажу вам, как это сделать.

Ссылка на Github здесь

Оцените статью
devanswers.ru
Добавить комментарий