举例：常见原型图到Flutter
1、原型：顶部标题栏 + 中间列表 + 底部按钮

Scaffold(
  appBar: AppBar(title: Text("商品列表")),
  body: ListView(
    children: [
      ListTile(title: Text("商品1")),
      ListTile(title: Text("商品2")),
    ],
  ),
  bottomNavigationBar: Padding(
    padding: const EdgeInsets.all(8.0),
    child: ElevatedButton(
      onPressed: () {},
      child: Text("立即购买"),
    ),
  ),
);

2、原型：左右两列布局（左边图，右边文字）

Row(
  children: [
    Image.network("https://example.com/img.png", width: 100),
    SizedBox(width: 10),
    Expanded(child: Text("这是商品描述...")),
  ],
);

3、原型：卡片式展示

Card(
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Column(
      children: [
        Text("标题", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
        SizedBox(height: 10),
        Text("这是内容区域"),
      ],
    ),
  ),
);

可以把原型图的 模块（头部、内容、底部、按钮、表单） 拆解成 Flutter 里的 Widget树，就能快速完成布局。

其实就像写 Vue + TailwindCSS，只不过在 Flutter 里所有东西都是 Widget。

完整的商品详情页面

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '商品详情',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const ProductPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("商品详情"),
        backgroundColor: Theme.of(context).colorScheme.primary,
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 顶部图片
            Image.network(
              "https://picsum.photos/600/300",
              width: double.infinity,
              height: 200,
              fit: BoxFit.cover,
            ),

            // 商品标题
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text(
                "Flutter 高级开发课程",
                style: const TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),

            // 商品价格
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: Text(
                "￥199.00",
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.red.shade400,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),

            const SizedBox(height: 20),

            // 商品描述
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text(
                "这是一个 Flutter 高级开发课程，内容涵盖跨平台开发、性能优化、"
                "状态管理、插件开发等核心知识，帮助你快速成为全栈开发工程师。",
                style: const TextStyle(fontSize: 16),
              ),
            ),
          ],
        ),
      ),

      // 底部按钮
      bottomNavigationBar: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SizedBox(
          width: double.infinity,
          height: 50,
          child: ElevatedButton(
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text("购买成功！")),
              );
            },
            child: const Text(
              "立即购买",
              style: TextStyle(fontSize: 18),
            ),
          ),
        ),
      ),
    );
  }
}