Flutter电商设计系统插件ecommerce_design_system_package的使用

Atomic Flutter Package

Atomic Flutter Package 是一个用于Flutter应用程序的设计系统包，根据原子设计原则组织。它提供了一个结构化的UI组件层次结构，这些组件是模块化、可重用且易于集成到你的Flutter项目中的。

入门指南

安装

在pubspec.yaml文件中添加ecommerce_design_system_package：

dependencies:
  ecommerce_design_system_package: ^1.0.0

然后运行以下命令：

flutter pub get

使用

原子（Atoms）

原子是设计系统的最基本构建块。

示例：

import 'package:ecommerce_design_system_package/atoms/skeleton_widget.dart';

SkeletonWidget(
  height: 100,
  width: 100,
);

分子（Molecules）

分子是由多个UI元素组成的相对简单的组合，这些元素作为一个单元共同工作。

示例：

import 'package:ecommerce_design_system_package/molecules/detail_card.dart';

ProductCard(
  cardData: ProductCardModel(
      id: 1,
      title: '测试标题',
      image: 'assets/molecule.png',
      subtitle: '测试副标题'),
);

组织（Organisms）

组织是由多个分子和/或原子组成的相对复杂的UI组件。

示例：

import 'package:ecommerce_design_system_package/organisms/login_form.dart';

LoginForm(
  usernameController: TextEditingController(),
  passwordController: TextEditingController(),
  onLogin: () => print('登录按钮被按下'),
);

模板（Templates）

模板是在页面级别上将组件放入布局中，并表达设计的基本内容结构的对象。

示例：

import 'package:ecommerce_design_system_package/templates/login_template.dart';

LoginTemplate(
  usernameController: TextEditingController(),
  passwordController: TextEditingController(),
  onLogin: () => print('登录按钮被按下'),
);

页面（Pages）

页面是模板的具体实例，它们将实际内容填充到布局中。

示例：

import 'package:ecommerce_design_system_package/pages/login_page.dart';

LoginPage(
  handleLogin: () => print('登录按钮被按下'),
  usernameController: TextEditingController(),
  passwordController: TextEditingController(),
);

示例代码

以下是一个完整的示例代码，展示了如何使用该插件的不同部分。

import 'package:example/pages/atoms_page.dart';
import 'package:example/pages/molecules_page.dart';
import 'package:example/pages/organism_page.dart';
import 'package:example/pages/pages_page.dart';
import 'package:example/pages/templates_page.dart';
import 'package:example/widget/option_card.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: '原子设计'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Padding(
                padding: EdgeInsets.all(8.0),
                child: Text(
                  '在这个示例中，你可以通过ecommerce_design_system_package插件理解原子设计：',
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(18.0),
                child: GridView(
                  shrinkWrap: true,
                  padding: const EdgeInsets.symmetric(vertical: 12),
                  physics: const NeverScrollableScrollPhysics(),
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                    mainAxisSpacing: 20.0,
                    crossAxisSpacing: 12.0,
                    childAspectRatio: 1 / 1.0,
                  ),
                  children: [
                    OptionCardWidget(
                      title: '原子',
                      urlImage: 'assets/atom.png',
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => const AtomsPage()),
                        );
                      },
                    ),
                    OptionCardWidget(
                      title: '分子',
                      urlImage: 'assets/molecule.png',
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => MoleculesPage()),
                        );
                      },
                    ),
                    OptionCardWidget(
                      title: '组织',
                      urlImage: 'assets/organism.png',
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => OrganismPage()),
                        );
                      },
                    ),
                    OptionCardWidget(
                      title: '页面',
                      urlImage: 'assets/page.png',
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => const PagesPage()),
                        );
                      },
                    ),
                    OptionCardWidget(
                      title: '模板',
                      urlImage: 'assets/template.png',
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => const TemplatesPage()),
                        );
                      },
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}