Flutter开发常见问题,解决小技巧

Posted 怀君

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter开发常见问题,解决小技巧相关的知识,希望对你有一定的参考价值。

1.android Studio 4.0 以上打包编译报错;

Execution failed for task ':app:lintVitalRelease'.
> Could not resolve all artifacts for configuration ':app:debugRuntimeClasspath'.
   > Failed to transform libs.jar to match attributes artifactType=processed-jar, org.gradle.libraryelements=jar, org.gradle.usage=java-runtime.
      > Execution failed for JetifyTransform: E:\\FlutterSpace\\xxxx\\build\\app\\intermediates\\flutter\\debug\\libs.jar.
         > Transform's input file does not exist: E:\\FlutterSpace\\xxxx\\build\\app\\intermediates\\flutter\\debug\\libs.jar. (See https://issuetracker.google.com/
issues/158753935)

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

* Get more help at https://help.gradle.org

1.在子build.gradle添加以下代码:

android
	lintOptions  checkReleaseBuilds false 

  

解决方案:原文地址:https://my.oschina.net/u/4364921/blog/4725237

2.Exception: Gradle build failed to produce an .apk file. It’s likely that this file was generated under /build, but the tool couldn’t find it.

打包时找不到渠道包名导致;

1.通过VSCode找到项目当中有一 launch.json 文件


    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
            
                    "name": "YOUR_PROJECT_NAME",//你项目的名称
                    "program": "lib/main.dart",
                    "request": "launch",
                    "type": "dart",
                    "args": [
                            "--flavor",
                            "ADD_YOUR_FLAVOR_NAME_HERE" //配置你的渠道包名
                        ]
            
    ]

2.通过Andorid Studio 找到子build.gradle文件添加渠道配置;

android 
    compileOptions 
        targetCompatibility JavaVersion.VERSION_1_8
        sourceCompatibility JavaVersion.VERSION_1_8
    

    android.applicationVariants.all 
        variant ->
            variant.outputs.all 
                //在这里修改apk文件名
                outputFileName = "-v$variant.versionName-$variant.productFlavors[0].name-release.apk"
            
    

    productFlavors 
        pgyer    // 蒲公英
        huawei        // 华为商店
        baidu         // 百度手机助手
        yinyongbao    // 应用宝
        xiaomi    // 小米
        oppo    // OPPO
        vivo    // VIVO
        s360    // 360
        lenovo    // 联想
        aliuc    // 阿里UC
    

    // 批量渠道包值替换(有些第三方库中需要用到渠道名)
    productFlavors.all  flavor ->
        // 友盟推送渠道包, UMENG_CHANNEL_VALUE 是根据你AndroidManifest.xml来配置的,请看下面。
        flavor.manifestPlaceholders = [UMENG_CHANNEL_VALUE: name]
    
    //解决打包异常的问题
    lintOptions  checkReleaseBuilds false 

解决方案:https://stackoverflow.com/questions/59732883/flutter-gradle-build-failed-to-produce-an-apk-file-its-likely-that-this-file

3._positions.isNotEmpty, ‘ScrollController not attached to any scroll views.’

具体报错问题;

The following assertion was thrown building Swiper(state: _SwiperState#e86c5):
ScrollController not attached to any scroll views.
'package:flutter/src/widgets/scroll_controller.dart':
Failed assertion: line 108 pos 12: '_positions.isNotEmpty'

解决方案:https://blog.csdn.net/youtiankeng/article/details/107419322

4.Android studio Flutter 开发快捷键

https://flutter.cn/docs/development/tools/android-studio

5.Flutter WebView js交互

html 测试代码块

<html>
<head>
    <title>Js调用Flutter</title>
    <script>
     function Close() 
        AppWndClose.postMessage("JS调用了Flutter");
    
    </script>
</head>

<body>
<br>
<input type="button" value="关闭" onclick="Close()"/>
</body>
</html>

flutter 测试代码块

WebView(
     javascriptChannels: <JavascriptChannel>[ 
        JavascriptChannel(
      name: 'AppWndClose',
      onMessageReceived: (JavascriptMessage message) 
        showToast(message.message);
      )
   ].toSet(),
)

我们要注意的是代码里面使用的都是AppWndClose ;这个是我们要注意到的;
参考地址:https://zhuanlan.zhihu.com/p/124797055

6.Flutter WebView跳转dart界面

  1. 通过js的方法进行调用;
class CustomWebViewPage extends StatefulWidget 
  final String url;

  CustomWebViewPage(
    Key key,
    @required this.url,
  );

  @override
  createState() => _PageState();


class _PageState extends State<CustomWebViewPage> with WidgetsBindingObserver 
  _PageState();

  FlutterWebviewPlugin _webViewPlugin = FlutterWebviewPlugin();

  double lineProgress = 0.0;

  bool loadError = false;

  HomeModel homeModel;

  initState() 
    super.initState();
    _webViewPlugin.onProgressChanged.listen((progress) 
      print(progress);
      setState(() 
        lineProgress = progress;
      );
    );
    _webViewPlugin.onHttpError.listen((progress) 
      setState(() 
        loadError = true;
      );
    );
    _webViewPlugin.onStateChanged.listen((event) 
      if (event.type == WebViewState.finishLoad) 
      setState(() );
    );
    WidgetsBinding.instance.addObserver(this);
    EventBus.getDefault().register(this, (data) 
      if (data is PublishPostsEvent || data == 'tabRankList') 
        _webViewPlugin.evalJavascript("RefreshMissionList()").then((res) 
          print("evaluateJavascript-res: $res");
        );
      
    );
    _wlakPermission(false);
  

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) 
    print("-didChangeAppLifecycleState-" + state.toString());
    switch (state) 
      case AppLifecycleState.inactive: // 处于这种状态的应用程序应该假设它们可能在任何时候暂停。
        break;
      case AppLifecycleState.resumed: //从后台切换前台,界面可见
        _webViewPlugin.evalJavascript("AppOnShow()").then((res) 
          print("evaluateJavascript-res: $res");
        );
        break;
      case AppLifecycleState.paused: // 界面不可见,后台
        _webViewPlugin.evalJavascript("AppOnHide()").then((res) 
          print("evaluateJavascript-res: $res");
        );
        ;
        break;
      case AppLifecycleState.detached: // APP结束时调用
        break;
    
  

  @override
  Widget build(BuildContext context) 
    homeModel = Provider.of<HomeModel>(context);
    return WebviewScaffold(
        url: widget.url,
        mediaPlaybackRequiresUserGesture: false,
        withZoom: false,
        withJavascript: true,
        clearCookies: true,
        hidden: true,
        javascriptChannels: <JavascriptChannel>[
          JavascriptChannel(
              name: "AppWndClose",
              onMessageReceived: (JavascriptMessage message) 
                NavigatorUtils.goBack(context);
              ),
          _postThread(),
          _partInTopic(),
        ].toSet(),
        initialChild: Container(
          child: Stack(
            children: [
              Center(
                  child: StateLayout(
                type: loadError ? StateType.network : StateType.loading,
              )),
              _setTitle(context),
            ],
          ),
        ));
  

  _postThread() 
    return JavascriptChannel(
        name: "eventPostThread",
        onMessageReceived: (JavascriptMessage message) 
          _webViewPlugin.hide();
          print("参数: $message.message");
          NavigatorUtils.push(context, ProfileRouter.publishPosts)
              .then((value) 
            _webViewPlugin.show();
            _webViewPlugin.evalJavascript("RefreshMissionList()").then((res) 
              print("evaluateJavascript-res: $res");
            );
          );
        );
  


  _partInTopic() 
    return JavascriptChannel(
        name: "eventTaskPartinTopic",
        onMessageReceived: (JavascriptMessage message) 
    // 因为flutter_webview_plugin 是浮在flutterUI上的一层视图,它不在widget树中,跳转到dart页面时,需要隐藏掉web页面
          _webViewPlugin.hide();
          NavigatorUtils.push(context, TopicRouter.topic).then((value) 
          //再跳回来时再显示web页面
            _webViewPlugin.show();
            _webViewPlugin.evalJavascript("RefreshMissionList()").then((res) 
            //同时调用web端接口进行刷新操作;
            );
          );
        );
  


  _setTitle(context) 
    return Positioned(
      left: 15,
      top: MediaQuery.of(context).padding.top + 5,
      child: BackButton(
        onPressed: () 
          NavigatorUtils.goBack(context);
        ,
      ),
    );
  

  _progressBar(double progress, BuildContext context) 
    return Offstage(
        offstage: progress == 1.0,
        child: Container(
          child: LinearProgressIndicator(
            backgroundColor: Colors.blueAccent.withOpacity(0),
            value: progress == 1.0 ? 0 : progress,
            valueColor: new AlwaysStoppedAnimation<Color>(Colors.lightBlue),
          ),
          height: 2,
        ));
  

  @override
  void dispose() 
    _webViewPlugin.dispose();
    WidgetsBinding.instance.removeObserver(this);
    EventBus.getDefault().unregister(this);
    super.dispose();
  


  1. 通过加载URL的形式进行监听响应跳转;

///省略上面代码;

  @override
  void initState() 
    super.initState();

    flutterWebviewPlugin.onUrlChanged.listen((loadUrl)
      //WebviewScaffold 加载的url变化时触发此方法
      // print('===>>当前 url:$loadUrl');

      // h5 点退出按钮,关闭webView
      if (loadUrl.endsWith('/backapp'))
        flutterWebviewPlugin.close();
        pop();
      
      // 跳转到dart页面
      else if (loadUrl.endsWith('/policy'))
        // 因为flutter_webview_plugin 是浮在flutterUI上的一层视图,它不在widget树中,跳转到dart页面时,需要隐藏掉web页面,再跳回来时再显示web页面
        flutterWebviewPlugin.hide(); 
        routePush(ClassRoomPage()).then((value) 
          flutterWebviewPlugin.show();
          flutterWebviewPlugin.reloadUrl(widget.url);
        );

//跳转到dart页面时,也可以关闭掉web页面,再跳回来时再创建一个web页面
        // flutterWebviewPlugin.close();
        // routePush(ClassRoomPage()).then((value)
        //   flutterWebviewPlugin.launch(widget.url,
        //     rect: new Rect.fromLTWH( // 设置web页面的尺寸
        //       0.0,
        //       _navBarHeight,
        //       MediaQuery.of(_context).size.width,
        //       MediaQuery.of(_context).size.height-_navBarHeight,
        //     ),
        //   );
        // );
      
    );

    //加载错误时监听
    // flutterWebviewPlugin.onHttpError.listen((error)
    //   print('加载错误:$error.code  $error.url');
    // );

    //加载状态变化监听
    // flutterWebviewPlugin.onStateChanged.listen((state)
    //   print('状态监听:$state.type.toString()');
    // );
  

参考文章:flutter_webview_plugin 与dart页面跳转使用

7. cmdline-tools component is missing Run path/to/sdkmanager --install "cmdline-tools;latest"

参考文章:https://blog.csdn.net/weixin_41824429/article/details/118942087

8.android studio安装和flutter project创建卡住问题解决

参考文章:https://blog.csdn.net/lucynie/article/details/106928231

9. Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

参考文章:https://www.jianshu.com/p/4feeec038482

10.Flutter Getx 结合 TabView

参考文章:https://stackoverflow.com/questions/63924491/how-to-build-a-tabview-using-flutter-getx

11. Flutter 项目window应用鼠标无法滚动


const Set<PointerDeviceKind> _kTouchLikeDeviceTypes = <PointerDeviceKind>
  PointerDeviceKind.touch,
  PointerDeviceKind.mouse,
  PointerDeviceKind.stylus,
  PointerDeviceKind.invertedStylus,
  PointerDeviceKind.unknown
;

MaterialApp(
    ...
    scrollBehavior: const MaterialScrollBehavior().copyWith(
      scrollbars: true,
      dragDevices: _kTouchLikeDeviceTypes
    ),
    ...
);

//如果你使用的是Getx框架同上,有相同的属性;scrollBehavior

参考文章:https://www.cnblogs.com/yangyxd/p/15080537.html

12. Flutter 项目window应用运行异常

问题:

CMake Error at CMakeLists.txt:2 (project):
  Generator

    Visual Studio 16 2019

  could not find any instance of Visual Studio.

具体解决方法:

https://stackoverflow.com/questions/69944913/cmake-error-while-running-flutter-desktop-application/69951396#69951396 。 Flutter 2.9 版支持 VS 2022,而您使用的 2.8.1 版仅支持 VS 2019。只需安装 2019 并试一试。
如果你想在 2.8.1 版本中使用 VS 2022,这里是解决方法。 stackoverflow.com/a/69951396/6566310 我想这个解决方法是值得的。
感谢您提供这两种解决方案。但我确实选择了第一个,现在它正在工作。

解决方案:https://www.likecs.com/ask-5954170.html

12. Flutter创建本地 Library 工具类

解决方案:https://www.jianshu.com/p/70f874765965

以上是关于Flutter开发常见问题,解决小技巧的主要内容,如果未能解决你的问题,请参考以下文章

iOS开发小技巧--学会包装控件(有些view的位置由于代码或系统原因,位置或者尺寸不容易修改或者容易受外界影响)

Flutter 小技巧之玩转字体渲染和问题修复

如何让 Flutter 小部件适应不同的屏幕尺寸

flutter开发游戏入门(仿谷歌浏览器小恐龙Chrome dino)二

postman 中的小技巧

Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套