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