主页/WEB笔记/前端转Flutter，哪些经验能带走哪些得重学？

前端转Flutter，哪些经验能带走哪些得重学？

3,651字
15–23 分钟
in

搞前端切到Flutter开发，脑袋里一堆问号：写HTML CSS那套还能用不？响应式布局是不是换个马甲？别急，这波经验迁移有门道。从网页画布跳到移动端画板，有些技能直接平移，有些概念得重新烧脑。文中拆解UI实现、调试工具、滚动控制、环境配置这些硬核环节，顺带扒一扒打包上架的坑。全是实操淌出来的路子，看完直接上手开干。

目录

啥是Flutter

Flutter这玩意儿，本质上是谷歌整出来的跨端开发框架。拿Dart语言写代码，一套代码能在安卓、iOS、网页、桌面端跑起来。它最骚的操作是自己带了一个渲染引擎，不像React Native那样去调原生控件。每个Flutter应用都内嵌了这个引擎，直接在设备上画界面，所以叫“像素级精准”。不管跑在啥设备上，画出来的UI长得一模一样。好比每个App自带了一个画板和画笔，想咋画就咋画，不用看系统脸色。

经验能平移

UI搭建

写网页时候，HTML堆结构，CSS刷样式。到了Flutter，换成Widget堆结构，属性刷样式。Widget就是Flutter里的积木块，每个按钮、每段文字都是一个Widget。样式方面，Dart里的Color类同样认rgba和hex，长度单位照样用像素（px）。CSS里那些边框圆角、阴影、透明度、字重，Flutter都有对应的类：BorderRadius、BoxShadow、Opacity、FontWeight，直接拿来就用。

// 一个带圆角和阴影的容器
Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Color(0xFF6200EE),
    borderRadius: BorderRadius.circular(12),
    boxShadow: [BoxShadow(blurRadius: 8, color: Colors.grey)],
  ),
  child: Text('点我试试'),
)

布局方面，网页的display: flex在Flutter里变成Row（水平排列）和Column（垂直排列）。justify-content和align-items换成MainAxisAlignment和CrossAxisAlignment。想让某个子元素像flex-grow那样撑满剩余空间？拿Expanded或Flexible把它包起来就完事。

碰到超级复杂的自定义界面，比如画个仪表盘或者波形图，Flutter提供了CustomPaint。这货相当于网页里的Canvas API，给一个画笔（Painter），爱画啥画啥。当组合一堆Widget搞不定的时候，CustomPaint就是救场王。

多屏适配

写响应式网页得搞媒体查询，根据不同宽度调样式。Flutter里来了个MediaQuery，这玩意儿能掏出当前设备的横竖屏状态（orientation）、视口尺寸（size）、设备像素比（devicePixelRatio）。拿到这些数据后，可以动态调整布局。比如竖屏时列表单列显示，横屏时变成两列网格。

final mediaQuery = MediaQuery.of(context);
final screenWidth = mediaQuery.size.width;
if (screenWidth < 600) {
  // 手机样式
} else {
  // 平板样式
}

调试工具链

浏览器里按F12调出开发者工具，有检查器、控制台、网络监控。Flutter有自己的DevTools，一样带Widget检查器、调试器、网络监控。IDE方面，VS Code照样能用，装上Dart和Flutter扩展包，调试体验丝滑。命令行党也有福利：Flutter CLI一把梭，flutter create建项目，flutter run跑起来，flutter test跑单测，跟Angular CLI、Create React App一个尿性。

新东西得硬啃

滚动得自己管

网页里内容多了浏览器自动出滚动条，CSS里改个overflow: auto就搞定。Flutter完全不一样：Widget组默认不会滚动。一旦内容超出屏幕，直接报溢出错误，红底黄字糊脸上。所以写Flutter时，但凡觉得内容可能超，就得主动套上滚动Widget。常用三件套：ListView（列表滚动）、SingleChildScrollView（单个子元素滚动）、CustomScrollView（高级定制滚动）。

// 一个简单的滚动列表
ListView(
  children: [
    Text('第一行'),
    Text('第二行'),
    // ... 更多内容
  ],
)

CustomScrollView能搞出复杂交互，比如头部折叠、多类型滚动区域混排。做这行得转换思维：别老想着网页那种文档流，要把App当成一块空白画布，Flutter引擎负责往画布上画东西，滚动区域得自己圈出来。

环境配置不能偷懒

写网页多简单？新建一个index.html，双击就在浏览器里跑了。Flutter可没这么随便。要跑Flutter项目，得先装好Flutter SDK，还要给目标设备配环境。打算跑安卓？装Android Studio，配好Android SDK，再搞个模拟器或插个真机。跑iOS？得有Mac，装Xcode，再弄个iPhone模拟器或真机。跑Windows？装Visual Studio（不是VS Code）和Windows开发SDK。跑Linux？装一堆依赖包。

每次配置完环境，敲一下flutter doctor，这命令会列出啥装好了啥没装好，红灯绿灯一目了然。缺啥补啥。配置好后，flutter run跑起来，改代码后按R键热重载。VS Code扩展里还能设置保存时自动热重载，省得每次手动按。

打包上架流程

网站部署基本白嫖，搞个域名（一年几十块），扔到GitHub Pages或Netlify，完事。App上架完全另一套玩法。安卓应用走Google Play，苹果应用走App Store。两个平台都得注册开发者账号。苹果那边每年交99美元，还得验证身份。谷歌那边一次交25美元。App上架前，商店会人工审核，少则一天多则一周。而且用户不会自动更新App，得手动点更新。不像网页，刷新一下就是最新版。

上架操作步骤（以安卓为例）：

  1. 跑flutter build apk生成安装包
  2. 进Google Play Console，创建应用
  3. 填写商品详情（标题、描述、截图）
  4. 上传APK或App Bundle
  5. 设置定价（免费或付费）
  6. 提交审核，等通过后就能搜到了

苹果那边类似，但需要Xcode来打包，还要配证书和描述文件。这一套流程第一次走会有点懵，但跑通一次后就顺了。

啥情况别用Flutter

Flutter虽香，但也有翻车场景。如果想让用户拿浏览器开发者工具去调试网页，那别用Flutter——它渲染的是Canvas，开发者工具抓不到DOM。同样，指望浏览器扩展去改页面内容，Flutter也做不到。内容特别多的网站，比如博客、新闻站，用Flutter也不划算，SEO直接废了。

场景建议
需要浏览器扩展交互绕道
内容型网站别碰
纯业务App放心冲
跨端一致性要求高闭眼入

实操：搭一个滚动列表页

从零开始撸一个简单的滚动页面，包含头像、昵称和简介。

第一步，创建项目：

flutter create scroll_demo
cd scroll_demo

第二步，打开lib/main.dart，清空默认代码，敲下面的：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('滚动列表实战')),
        body: ListView.builder(
          itemCount: 30,
          itemBuilder: (context, index) {
            return ListTile(
              leading: CircleAvatar(child: Text('$index')),
              title: Text('用户编号 $index'),
              subtitle: Text('这是第$index位老铁的简介，内容会折行展示'),
            );
          },
        ),
      ),
    );
  }
}

第三步，连上手机或开模拟器，终端跑flutter run。看到列表丝滑滚动，手指一划就翻页。

注意：ListView.builder是按需构建，只渲染屏幕可见区域，性能比ListView(children: [...])好太多。数据量大的时候必须用builder模式，不然直接卡成PPT。

另一个坑：如果列表里混了不同类型的Widget，比如一个标题加一堆按钮，就别用ListTile了，直接用Column套Expanded或者用CustomScrollView配合SliverList。

最新发布