Flutter自定义组件外观

Python私教2024-11-01 23:12

In this section, we will embark on a practical journey to create an e-commerce catalog list page. My goal is to guide you through a step-by-step process, allowing you to grasp the concepts of customizing widget appearance using styles and themes. By the end of this challenge, you will have built a modern and simple product catalog screen that's both visually appealing and user-friendly.

在本节中，我们将开始创建电子商务目录列表页面的实践之旅。我的目标是一步一步地引导你，让你掌握使用样式和主题自定义 widget 外观的概念。在本挑战结束时，您将创建一个现代而简单的产品目录页面，它既具有视觉吸引力，又对用户友好。

Project requirements

项目要求

Our e-commerce catalog list page will consist of the following components:

我们的电子商务目录列表页面将由以下部分组成：

App Bar: A top navigation bar displaying the app's logoand search icon.

应用程序栏： 顶部导航栏：显示应用程序徽标和搜索图标。

Product List: A grid layout showcasing various products,each with an image, title, and price.

产品列表： 展示各种产品的网格布局，每种产品都有图片、标题和价格。

Product Card: A styled card container for each product,with a shadow effect and proper padding.

产品卡： 每个产品都有一个风格化的卡片容器，具有阴影效果和适当的衬垫。

Color Scheme: The app should support both light anddark modes, allowing users to switch between themeffortlessly.

色彩方案： 应用程序应支持浅色和深色模式，让用户可以轻松切换主题。

Now let's Dive In!

现在，让我们 "潜入 "其中！

Step 1: Set Up the Project

步骤 1：设置项目

Before we begin, create a new Flutter project and structure your folders appropriately.

在开始之前，请创建一个新的 Flutter 项目，并合理安排文件夹结构。

Step 2: Define the Color Palette

步骤 2：确定调色板

Define the primary and accent colors for your app's theme. For instance, you might choose a shade of blue as your primary color and a contrasting color as your accent.

确定应用程序主题的主色调和重点色调。例如，您可以选择蓝色作为主色调，对比色作为点缀色。

Step 3: Create a Theme

步骤 3：创建主题

Inside the main.dart file, wrap your MaterialApp with a Theme widget. Configure the theme with the colors and other properties you've defined.

在 main.dart 文件中，用主题部件包装 MaterialApp。使用您定义的颜色和其他属性配置主题。

Step 4: Build the App Bar

步骤 4：创建应用程序栏

Create the app bar with your app's logo and search icon. Use the AppBar widget and customize it using your defined theme.

创建带有应用徽标和搜索图标的应用栏。使用 AppBar 小工具，并使用您定义的主题对其进行自定义。

Step 5: Design the Product List

步骤 5：设计产品清单

Use the GridView.builder widget to create the product list. Each product will be represented by a ProductCard widget.

使用 GridView.builder widget 创建产品列表。每个产品都将由 ProductCard widget 表示。

Step 6: Implement the Product Card

步骤 6：实施产品卡

Define a custom ProductCard widget that represents an individual product. Style it with shadows, borders, and appropriate padding.

定义代表单个产品的自定义 ProductCard widget。使用阴影、边框和适当的填充为其设计样式。

Step 7: Implement Light and Dark Modes

步骤 7：实施明暗模式

Now comes the exciting part. Allow your users to switch between light and dark modes. In your Theme widget, set up a brightness property that toggles between Brightness.light and Brightness.dark based on user preference.

现在到了激动人心的部分。允许用户在明暗模式之间切换。在主题 widget 中，设置一个亮度属性，根据用户的偏好在 Brightness.light 和 Brightness.dark 之间切换。

As you attempt to create the screen, don't hesitate to experiment with different color palettes, font styles, and element layouts. Change the primary and accent colors to observe how they affect the overall look. Adjust the shadow properties on the product cards to fine-tune their appearance.

在尝试创建屏幕时，不要犹豫，尝试不同的调色板、字体样式和元素布局。改变主色和重点色，观察它们对整体外观的影响。调整产品卡片上的阴影属性，对其外观进行微调。

Solution

解决方案

Let's walk through the step-by-step solution for creating the ecommerce catalog list page with custom styles and themes.

让我们一步步了解如何使用自定义样式和主题创建电子商务目录列表页面。

Step 1: Define the theme.dart

步骤 1：定义 theme.dart

Create a new file theme.dart in your lib folder and begin by defining the AppThemes and AppColors classes to handle theme changes.

在 lib 文件夹中创建一个新文件 theme.dart，首先定义 AppThemes 和 AppColors 类来处理主题更改。

dart 复制代码 
// theme.dart
import "package:flutter/material.dart";

class AppColors {
  static const Color primaryColor = Colors.blue;
}

class AppThemes {
  static final lightTheme = ThemeData.light().copyWith(
    primaryColor: AppColors.primaryColor,
  );
  static final darkTheme = ThemeData.dark().copyWith(
    primaryColor: AppColors.primaryColor,
  );
}

Step 2: Import Required Packages and Create Theme Manager

第 2 步：导入所需软件包并创建主题管理器

In the main.dart file, begin by importing the necessary packages and defining the ThemeManager class to handle theme changes.

在 main.dart 文件中，首先导入必要的软件包并定义 ThemeManager 类以处理主题更改。

dart 复制代码 
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'theme.dart';

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

class ThemeManager {
  static void setThemeMode(ThemeMode mode) {
    Get.changeThemeMode(mode);
  }
}

Step 3: Define the Main App Widget

步骤 3：定义主应用程序小工具

Create the MyApp widget which sets up the MaterialApp and initializes the app with a light theme.

创建 MyApp widget，设置 MaterialApp 并使用浅色主题初始化应用程序。

dart 复制代码 
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Lagos Store',
      theme: AppThemes.lightTheme,
      darkTheme: AppThemes.darkTheme,
      home: const CatalogPage(),
    );
  }
}

Step 4: Create the Catalog Page

步骤 4：创建目录页面

In your lib folder, define the CatalogPage widget that displays the app bar and the grid of products.

在 lib 文件夹中，定义用于显示应用栏和产品网格的 CatalogPage widget。

dart 复制代码 
class CatalogPage extends StatelessWidget {
  const CatalogPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Lagos Store'),
        actions: const [
          ThemeManagerWidget(),
        ],
      ),
      body: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 0.7,
        ),
        itemCount: products.length,
        itemBuilder: (context, index) {
          return ProductCard(product: products[index]);
        },
      ),
    );
  }
}

Step 5: Define the Product Class

步骤 5：定义产品类

Modify the Product class to include a price field along with the existing name and imageUrl fields.

修改 Product 类，使其包含一个价格字段以及现有的 name 和 imageUrl 字段。

dart 复制代码 
class Product {
  final String name;
  final String imageUrl;
  final double price; // Add the price field

  Product({required this.name, required this.imageUrl, required this.price});
}

final List<Product> products = [
  Product(name: 'White Garri', imageUrl: 'assets/1.jpg', price: 99.99),
  Product(name: 'Smoked Fish', imageUrl: 'assets/2.jpg', price: 149.99),
  Product(name: 'Bean Flour', imageUrl: 'assets/3.jpg', price: 199.99),
  // Add more products
];

Step 6: Create Product Cards

步骤 6：创建产品卡

Adjust the ProductCard widget to display the product's name and price.

调整 ProductCard 部件，以显示产品名称和价格。

dart 复制代码 
class ProductCard extends StatelessWidget {
  final Product product;

  const ProductCard({super.key, required this.product});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Image.asset(
            product.imageUrl,
            height: 100,
          ),
          const SizedBox(height: 8),
          Text(product.name),
          Text('\$${product.price.toStringAsFixed(2)}',
              style: const TextStyle(fontWeight: FontWeight.bold)),
        ],
      ),
    );
  }
}

Step 7: Add Theme Toggle Button

第 7 步：添加主题切换按钮

Modify the ThemeManagerWidget to include a toggle button for switching between light and dark themes.

修改 ThemeManagerWidget，使其包含一个用于在浅色和深色主题之间切换的切换按钮。

dart 复制代码 
class ThemeManagerWidget extends StatelessWidget {
  const ThemeManagerWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: const Icon(Icons.brightness_4),
      onPressed: () {
        if (Get.isDarkMode) {
          ThemeManager.setThemeMode(ThemeMode.light);
        } else {
          ThemeManager.setThemeMode(ThemeMode.dark);
        }
      },
    );
  }
}

And that's it! You've successfully built an e-commerce catalog list page with custom styles and themes using Flutter.

就是这样！您已经使用 Flutter 成功创建了一个具有自定义样式和主题的电子商务目录列表页面。

Full source code

完整源代码

pubspec.yaml

yaml 复制代码 
name: c01_hello
description: "A new Flutter project."
publish_to: 'none'
version: 1.0.0+1
environment:
  sdk: ^3.5.3
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8
  get:

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^4.0.0
flutter:
  uses-material-design: true
  assets:
    - assets/1.jpg
    - assets/2.jpg
    - assets/3.jpg

theme.dart

dart 复制代码 
// theme.dart
import "package:flutter/material.dart";

class AppColors {
  static const Color primaryColor = Colors.blue;
}

class AppThemes {
  static final lightTheme = ThemeData.light().copyWith(
    primaryColor: AppColors.primaryColor,
  );
  static final darkTheme = ThemeData.dark().copyWith(
    primaryColor: AppColors.primaryColor,
  );
}

main.dart

dart 复制代码 
//main.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'theme.dart';

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

class ThemeManager {
  static void setThemeMode(ThemeMode mode) {
    Get.changeThemeMode(mode);
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Lagos Store',
      theme: AppThemes.lightTheme,
      darkTheme: AppThemes.darkTheme,
      home: const CatalogPage(),
    );
  }
}

class CatalogPage extends StatelessWidget {
  const CatalogPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Lagos Store'),
        actions: const [
          ThemeManagerWidget(),
        ],
      ),
      body: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 0.7,
        ),
        itemCount: products.length,
        itemBuilder: (context, index) {
          return ProductCard(product: products[index]);
        },
      ),
    );
  }
}

class Product {
  final String name;
  final String imageUrl;
  final double price; // Add the price field

  Product({required this.name, required this.imageUrl, required this.price});
}

final List<Product> products = [
  Product(name: 'White Garri', imageUrl: 'assets/1.jpg', price: 99.99),
  Product(name: 'Smoked Fish', imageUrl: 'assets/2.jpg', price: 149.99),
  Product(name: 'Bean Flour', imageUrl: 'assets/3.jpg', price: 199.99),
  // Add more products
];

class ProductCard extends StatelessWidget {
  final Product product;

  const ProductCard({super.key, required this.product});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Image.asset(
            product.imageUrl,
            height: 100,
          ),
          const SizedBox(height: 8),
          Text(product.name),
          Text('\$${product.price.toStringAsFixed(2)}',
              style: const TextStyle(fontWeight: FontWeight.bold)),
        ],
      ),
    );
  }
}

class ThemeManagerWidget extends StatelessWidget {
  const ThemeManagerWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: const Icon(Icons.brightness_4),
      onPressed: () {
        if (Get.isDarkMode) {
          ThemeManager.setThemeMode(ThemeMode.light);
        } else {
          ThemeManager.setThemeMode(ThemeMode.dark);
        }
      },
    );
  }
}

效果预览:

R emember, practice makes perfect, so don't hesitate to explore more and apply what you've learned to your own projects. Happy coding!

请记住，实践出真知，所以不要犹豫，继续探索，并将所学应用到自己的项目中。祝你编码愉快！

代码改造和封装

初始代码

dart 复制代码 
import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

class AppColors {
  static const Color primaryColor = Colors.blue;
}

class AppThemes {
  static final lightTheme = ThemeData.light().copyWith(
    primaryColor: AppColors.primaryColor,
  );
  static final darkTheme = ThemeData.dark().copyWith(
    primaryColor: AppColors.primaryColor,
  );
}

class ThemeManager {
  static void setThemeMode(ThemeMode mode) {
    Get.changeThemeMode(mode);
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Lagos Store',
      theme: AppThemes.lightTheme,
      darkTheme: AppThemes.darkTheme,
      home: const CatalogPage(),
    );
  }
}

class CatalogPage extends StatelessWidget {
  const CatalogPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Lagos Store'),
        actions: const [
          ThemeManagerWidget(),
        ],
      ),
      body: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 0.7,
        ),
        itemCount: products.length,
        itemBuilder: (context, index) {
          return ProductCard(product: products[index]);
        },
      ),
    );
  }
}

class Product {
  final String name;
  final String imageUrl;
  final double price; // Add the price field

  Product({required this.name, required this.imageUrl, required this.price});
}

final List<Product> products = [
  Product(name: 'White Garri', imageUrl: 'assets/1.jpg', price: 99.99),
  Product(name: 'Smoked Fish', imageUrl: 'assets/2.jpg', price: 149.99),
  Product(name: 'Bean Flour', imageUrl: 'assets/3.jpg', price: 199.99),
  // Add more products
];

class ProductCard extends StatelessWidget {
  final Product product;

  const ProductCard({super.key, required this.product});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Image.asset(
            product.imageUrl,
            height: 100,
          ),
          const SizedBox(height: 8),
          Text(product.name),
          Text('\$${product.price.toStringAsFixed(2)}',
              style: const TextStyle(fontWeight: FontWeight.bold)),
        ],
      ),
    );
  }
}

class ThemeManagerWidget extends StatelessWidget {
  const ThemeManagerWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: const Icon(Icons.brightness_4),
      onPressed: () {
        if (Get.isDarkMode) {
          ThemeManager.setThemeMode(ThemeMode.light);
        } else {
          ThemeManager.setThemeMode(ThemeMode.dark);
        }
      },
    );
  }
}

初步抽离

theme.dart

dart 复制代码 
import 'package:flutter/material.dart';

class AppColors {
  static const Color primaryColor = Colors.blue;
}

class AppThemes {
  static final lightTheme = ThemeData.light().copyWith(
    primaryColor: AppColors.primaryColor,
  );
  static final darkTheme = ThemeData.dark().copyWith(
    primaryColor: AppColors.primaryColor,
  );
}

main.dart

dart 复制代码 
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'theme.dart';

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

class ThemeManager {
  static void setThemeMode(ThemeMode mode) {
    Get.changeThemeMode(mode);
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Lagos Store',
      theme: AppThemes.lightTheme,
      darkTheme: AppThemes.darkTheme,
      home: const CatalogPage(),
    );
  }
}

class CatalogPage extends StatelessWidget {
  const CatalogPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Lagos Store'),
        actions: const [
          ThemeManagerWidget(),
        ],
      ),
      body: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 0.7,
        ),
        itemCount: products.length,
        itemBuilder: (context, index) {
          return ProductCard(product: products[index]);
        },
      ),
    );
  }
}

class Product {
  final String name;
  final String imageUrl;
  final double price; // Add the price field

  Product({required this.name, required this.imageUrl, required this.price});
}

final List<Product> products = [
  Product(name: 'White Garri', imageUrl: 'assets/1.jpg', price: 99.99),
  Product(name: 'Smoked Fish', imageUrl: 'assets/2.jpg', price: 149.99),
  Product(name: 'Bean Flour', imageUrl: 'assets/3.jpg', price: 199.99),
  // Add more products
];

class ProductCard extends StatelessWidget {
  final Product product;

  const ProductCard({super.key, required this.product});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Image.asset(
            product.imageUrl,
            height: 100,
          ),
          const SizedBox(height: 8),
          Text(product.name),
          Text('\$${product.price.toStringAsFixed(2)}',
              style: const TextStyle(fontWeight: FontWeight.bold)),
        ],
      ),
    );
  }
}

class ThemeManagerWidget extends StatelessWidget {
  const ThemeManagerWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: const Icon(Icons.brightness_4),
      onPressed: () {
        if (Get.isDarkMode) {
          ThemeManager.setThemeMode(ThemeMode.light);
        } else {
          ThemeManager.setThemeMode(ThemeMode.dark);
        }
      },
    );
  }
}
相关推荐
迷雾漫步者2 分钟前
Flutter组件————PageView
flutter·跨平台·dart
迷雾漫步者7 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
coder_pig12 小时前
📝小记：Ubuntu 部署 Jenkins 打包 Flutter APK
flutter·ubuntu·jenkins
捡芝麻丢西瓜14 小时前
flutter自学笔记5- dart 编码规范
flutter·dart
恋猫de小郭14 小时前
什么？Flutter 可能会被 SwiftUI/ArkUI 化？全新的 Flutter Roadmap
flutter·ios·swiftui
sunly_2 天前
Flutter：导航，tab切换，顶部固定，列表分页滚动
开发语言·javascript·flutter
敲代码的小强2 天前
Flutter项目兼容鸿蒙Next系统
flutter·华为·harmonyos
Zh-jie2 天前
flutter 快速实现侧边栏
前端·javascript·flutter
truemi.733 天前
flutter --no-color pub get 超时解决方法
android·flutter
王家视频教程图书馆3 天前
flutter 使用dio 请求go语言后台数据接口展示瀑布流图片
flutter
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程