Flutter 问题记录

记录下使用 Flutter 中遇到的一些问题。

[!] VS Code, 64-bit edition (version 1.25.0)

执行 flutter doctor 时提示 VS Code 错误,但明明已经安装了相关程序。

image

通过 flutter doctor -v 可以看到更多的细节

[!] VS Code, 64-bit edition (version 1.25.0)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension not installed; install from  https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

目前 beta 版本的 Flutter 的 VS Code 插件检查存在 bug,忽略这个检查错误即可。

https://github.com/flutter/flutter/issues/19223

Error connecting to the service protocol: HttpException

在执行 flutter run -d xxx 时,应用可以启动,但 socket 连接报错,导致无法 hot reload 无法查看 logs 。

Launching lib/main.dart on iPhone in debug mode...
Automatically signing iOS for device deployment using specified development team in Xcode project: 7QR8M344DV
Starting Xcode build...
 ├─Assembling Flutter resources...                    1.2s
 └─Compiling, linking and signing...                  2.3s
Xcode build done.                                            4.7s
Installing and launching...                                 23.2s
Error connecting to the service protocol: HttpException: , uri = http://127.0.0.1:8113/ws

解决方法:
打开 XCODE - Window - Devices and Simulators,找到用来调试的设备
取消勾选 Connect via network
image

Flutter Error: Navigator operation requested with a context that does not include a Navigator

目前 MaterialApp 的 context 有一些问题导致 Navigator 跳转页面时候会报错。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Title"),
        ),
        body: new Center(child: new Text("Click Me")),
        floatingActionButton: new FloatingActionButton(
          child: new Icon(Icons.add),
          backgroundColor: Colors.orange,
          onPressed: () {
            print("Clicked");
            Navigator.push(
              context,
              new MaterialPageRoute(builder: (context) => new AddTaskScreen()),
            );
          },
        ),
      ),
    );
  }
}

创建一个新的 Widget 作为 MaterialApp 的 home 属性可以解决问题

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: new HomeScreen());
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Title"),
      ),
      body: new Center(child: new Text("Click Me")),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.add),
        backgroundColor: Colors.orange,
        onPressed: () {
          print("Clicked");
          Navigator.push(
            context,
            new MaterialPageRoute(builder: (context) => new AddTaskScreen()),
          );
        },
      ),
    );
  }
}

The ink splashes aren’t visible!

当 InkWell 和 Container、Image 等 widget 混合使用的时候(常见于自定义按钮,或者为图片添加点击动作等情况),会导致 InkWell 的点击扩散效果不可见。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new InkWell(
          onTap: (){print("tapped");},
          child: new Container(
            width: 100.0,
            height: 100.0,
            color: Colors.orange,
          ),
        ),
      ),
    );
  }
}

这是 InkWell 本身的特性,InkWell 点击的 splash 效果是绘制在最底层 Material 上,它的点击效果就像墨水在材料内部扩散一样。所以任何不透明的 widget 都会遮挡扩散效果
可以使用 Ink 组件来替代 Image、Container 或者 DecoratedBox 组件,Ink 组件同样绘制在最底层 Material 上,因此它不会遮挡点击的扩散效果。

InkWell class#Troubleshooting
https://docs.flutter.io/flutter/material/InkWell-class.html

Android dependency ‘com.android.support:support-fragment’ has different version for the compile (26.1.0) and runtime (27.1.1) classpath.

Initializing gradle...                                       0.8s
Resolving dependencies...                                    1.0s
Running 'gradlew assembleRelease'...

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:preReleaseBuild'.
> Android dependency 'com.android.support:support-fragment' has different version for the compile (26.1.0) and runtime (27.1.1) classpath. You should manually set the same version via DependencyResolution

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

根据 https://github.com/flutter/flutter/issues/14020
在 build.gradle 目录下面加入如下代码

subprojects {
    project.configurations.all {
        resolutionStrategy.eachDependency { details ->
            if (details.requested.group == 'com.android.support'
                    && !details.requested.name.contains('multidex') ) {
                details.useVersion "26.1.0"
            }
        }
    }
}
坚持原创技术分享,您的支持将鼓励我继续创作!