flutter常用组件详细介绍、屏幕适配方案、常用目录设计方案(附实例)

Text(
  'Flutter 组件配置详解',
  style: TextStyle(fontSize: 20, color: Colors.black, fontWeight: FontWeight.bold),
  textAlign: TextAlign.center,
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
)

Image.network(
  'https://example.com/image.jpg',
  width: 200,
  height: 100,
  fit: BoxFit.cover,
  alignment: Alignment.center,
)

ElevatedButton(
	  onPressed: () => print('Clicked'),
	  child: Text('提交'),
	  style: ElevatedButton.styleFrom(
	    primary: Colors.blue,
	    onPrimary: Colors.white,
	    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
	    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
	  ),
	)

TextField(
  controller: _usernameController,
  obscureText: false,
  keyboardType: TextInputType.text,
  maxLength: 20,
  decoration: InputDecoration(
    labelText: '用户名',
    hintText: '请输入用户名',
    prefixIcon: Icon(Icons.person),
    border: OutlineInputBorder(),
  ),
  onChanged: (value) {
    print('输入内容：$value');
  },
)

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Icon(Icons.star),
    Icon(Icons.star),
    Icon(Icons.star),
  ],
)

Container(
  width: 200,
  height: 100,
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.only(top: 20),
  alignment: Alignment.center,
  decoration: BoxDecoration(
    color: Colors.amber,
    borderRadius: BorderRadius.circular(10),
    boxShadow: [BoxShadow(color: Colors.grey, blurRadius: 4)],
  ),
  child: Text('我是容器'),
)

Stack(
  children: [
    Container(width: 200, height: 200, color: Colors.green),
    Positioned(
      top: 20,
      left: 20,
      child: Container(width: 100, height: 100, color: Colors.red),
    ),
  ],
)

CustomScrollView(
  slivers: [
    SliverToBoxAdapter(child: BannerWidget()),
    SliverToBoxAdapter(child: GridMenuWidget()),
    SliverPersistentHeader(
      pinned: true,
      delegate: StickyTabbarDelegate(),
    ),
    SliverStaggeredGrid.countBuilder(
      crossAxisCount: 2,
      itemCount: productList.length,
      itemBuilder: (context, index) => ProductItemWidget(product: productList[index]),
      staggeredTileBuilder: (index) => StaggeredTile.fit(1),
    ),
  ],
)

ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return ListTile(
      leading: Icon(Icons.person),
      title: Text('Person $index'),
      subtitle: Text('Subtitle $index'),
    );
  },
)

GridView.count(
  crossAxisCount: 2,
  children: List.generate(4, (index) {
    return Center(
      child: Text(
        'Item $index',
        style: Theme.of(context).textTheme.headline5,
      ),
    );
  }),
)

Card(
  elevation: 5,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('This is a card'),
  ),
)

dependencies:
  flutter_screenutil: ^5.5.3+2

import 'package:flutter_screenutil/flutter_screenutil.dart';

void main() {
  runApp(
    ScreenUtilInit(
      designSize: Size(375, 812), // 设计稿尺寸（例如 iPhone X）
      builder: (context, child) => MyApp(),
    ),
  );
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 100.w, // 屏幕适配宽度
          height: 100.h, // 屏幕适配高度
          child: Text('Hello', style: TextStyle(fontSize: 16.sp)), // 字体大小适配
        ),
      ),
    );
  }
}

lib/
├─ main.dart                 # 程序入口
├─ common/                   # 公共工具、样式、API
│   ├─ api.dart              # 接口请求统一管理
│   ├─ constants.dart        # 常量、枚举
│   ├─ utils/                # 工具类（日期、网络、加密等）
│   └─ styles/               # 主题、颜色、字体、全局样式
│
├─ widgets/                  # 全局可复用组件（跨页面）
│   ├─ custom_button.dart    # 通用按钮
│   ├─ empty_view.dart       # 空状态占位
│   ├─ loading_more.dart     # 加载更多动画
│   └─ custom_appbar.dart    # 顶部通用 AppBar
│
├─ pages/                    # 页面模块
│   ├─ home/                 # 首页模块
│   │   ├─ home_page.dart
│   │   ├─ widgets/          # 仅首页专属组件
│   │   │   ├─ notice_bar.dart
│   │   │   ├─ banner_carousel.dart
│   │   │   ├─ menu_grid.dart
│   │   │   ├─ waterfall_list.dart
│   │   │   └─ tab_section.dart
│   │   └─ home_controller.dart # 状态管理（Provider / Riverpod）
│   │
│   ├─ product/              # 商品模块
│   │   ├─ product_page.dart
│   │   ├─ widgets/          # 商品页面专属组件
│   │   │   ├─ product_card.dart
│   │   │   ├─ product_filter.dart
│   │   │   └─ product_banner.dart
│   │   └─ product_controller.dart
│   │
│   └─ mine/                 # 个人中心模块
│       ├─ mine_page.dart
│       └─ widgets/
│           └─ user_info_card.dart
│
└─ routes/                   # 路由统一管理
    └─ app_routes.dart