首先，中文网位置：
Flutter中文网

官网位置
Flutter官网

环境和安装(win10)

  • win10+ 开启虚拟化（这个倒是无所谓）
  • JAVA & PATH中JAVA_HOME的设置
  • 下载flutter或git clone flutter的仓库
  • Android Studio
    SDK下载，并把SDK的路径写入path
  • VisualStudio下载，安装时勾选 C++ 桌面程序
  • VSCODE + Plugin:flutter+dart+...
    这些就自行安装了

执行flutter doctor查看错误
一般有可能有一些错误，下面是不同的解法

  • android license未同意，这个直接到sdk下面找sdkmanager，然后sdkmanager --licenses，同意所有就OK
  • maven仓库的问题（未FQ）
    这个找
    flutter/packages/flutter_tools/gradle/flutter.gradleflutter/packages/flutter_tools/lib/src/http_host_validator.dart 修改maven()和google()为国内的仓库

踩到的坑

Q：不要在createState中放置参数

A：方法有两种

  1. 添加 //ignore ... ，代码提醒中有
  2. 直接使用widget（类似于js中的this），在StatefulWidget中定义参数
class A extends StatefulWidget {
  const A({Key? key, required this.fun}) : super(key:key);
  final Function fun;

  @override
  State<A> createState() => _A();
}

class _A extends State<A> {
  ...

  // 使用时如下
  widget.fun()
}

Q：经常遇到组件要不要使用const的warning问题

A：如果对象中有变量或者函数不要用const，如果是确定的固定的东西就要用const
比如 const BorderRadius.all(Radius.circular(10)) 就要用const，因为里面是不变的。
比如 TextField( controller: controller , ...) 就不能用const。

Q：怎么实现毛玻璃

Container > 
child: ClipRect(矩形) / ClipRRect(圆角) (
  borderRadius: ... // ClipRRect专属
  child: BackdropFilter(
    filter:ImageFilter.blur(sigmaX: double, sigmaY:double)  // 设置毛玻璃的半径
  )
)

Q：go_router的使用

/// router_module.dart
import ...
class RouterModule {
  static final router = GoRouter(
    initialLocation: "/",
    routes: [
      GoRoute(path: "/", builder: (context, state) => Page1()),
      ...
    ]
  )
}

/// main.dart
import "package:go_router/go_router.dart";

class App ... {

  @override
  Widget build(...) {
    return MaterialApp.router(
      ... 内部的其他参数和没加.router时一致
      routerConfig: RouterModule.router
    )
  }
}

/// A.dart
import ...
class ... {
  context.go("/B");
}

Q：设置Timer时声明了一个无初始值变量，但是后面又需要判断是否为空而取消timer

A：可以声明时设置 late Timer? timer，使用时使用timer!.cancel() // 和ts的有点像

Q：Chip的坑。

A：chip就像web里的label一样，作用挺大的，还有自定义的onPress和onDelete之类的方法，看属性

label: Text()   // required的方法，就是标签的内容
  labelStyle: TextStyle(...)  // 标签的样式，顾名思义
  side: BorderSide(width, color, style...)  // 边框样式，不需要的话直接style: BorderStyle.none
  labelPadding: EdgeInset...  // 控制标签的大小，是的chip不受height控制，就是label包裹的边框，如果要高度减小，vertical: -10
  shape: RoundedRectangleBorder / ...  // 可以设置一些边框的内容，比如圆角之类的，这个可以看文档
  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap / padded  // 这个就是是否计算周边的padding值，个人感觉不用，默认是要，看个人需求
  padding: ...  // 这个作用感觉没labelPadding好，可以看看这两个的共同作用
  backgroundColor: Color...  // 这个有点坑，没办法设置不透明度，找了一圈，有两种方法，第一种封装chip，个人感觉太麻烦了，第二种办法是在入口main.dart的theme: ThemeData(canvasColor: Colors.black.withOpacity(0.3))，然后使用时 Colors.transparent，大概是因为这种绘制的组件的透明度遵循的就是那个属性……有点坑，希望官方以后能修复一下吧。
  deleteIconColor: Color  // 删除键的颜色，自然应该可以用Paint
  onDeleted: fn  // 需要有这个才能有删除键
... 先搞这些吧

Q：有些时候需要负边距，比如profile页面的头像是在container的外面的怎么弄

A：使用Transform.translate(offset: Offset(0, -100))，但是有个问题是虽然被translate了，兄弟元素还是按照原来的高度排列，所以中间会出现空白……这个时候也许下面的元素也都要用这个……好恶心

Q：在做tabbar的时候，创建TabController(length: tabs.length, vsync:this)，vsync:this报错

A：类继承 class xxx extends State<...> with SingleTickerProviderStateMixin

Q：有时候子元素会有超出边界的问题，提示底部一些像素超出边界

A：可以在最顶部添加一个SingleChildScrollView，如果出现了整个页面可以滑动的问题，添加属性physics: const NeverScrollableScrollPhysics()不滚动

Q：ListView上面有一块padding，要怎么消除

A：在ListView头上套一层MediaQuery.removePadding

ListView ->
MediaQuery.removePadding(
  context: context,
  removeTop: true,
  child: ListView...
)

Q：有时候Scaffold无法控制drawer的开关

A：为Scaffold设置一个key

final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
...Scaffold(
  key: _scaffoldKey,
  ... onPressed(
    _scaffoldKey.currentState?.openDrawer();
  )
)