flutter的一些经验随笔

2025-02-13

最近新建flutter项目时，发现以前在macos端解决好的问题又重新出现了，我发现我竟然想不太起来如何解决了，还是记录一下吧。

macOs 联网问题，无法加载网络图片

iOS端和MacOs端默认是没有联网能力的，包括加载网络图片资源都不行，需要联网需要再${platform}/Runner/info.plist文件中添加以下字典

这个配置允许应用绕过ATS（应用传输安全）限制，访问所有网络资源。如果你的应用只需要访问特定的域名，可以更精细地配置以提高安全性。

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

我这里还用到一些定位和蓝牙的内容

<key>NSBluetoothAlwaysUsageDescription</key>
<string>Need BLE permission</string>
<key>NSBluetoothPeripheralUsageDescription</key>
<string>Need BLE permission</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>Need Location permission</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>Need Location permission</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Need Location permission</string>

在同目录下的文件夹下${platform}/Runner/DebugProfile.entitlements文件中添加字典

1 2	<key>com.apple.security.network.client</key> <true/>

我目前只用MacOs平台做调试，没有构建正式的意思，正式应该需要把Release.entitlements文件也维护上才行

移动设备状态里渐变沉浸

我目前知道两种方案，一种是利用AppBar中的flexibleSpace属性，但是这种方案只能把状态栏和标题栏一起做成渐变色，如果下面还需要渐变范围的话就需要自己拼接，比较麻烦

AppBar(
  backgroundColor: Colors.transparent,
  /// 淡出的状态栏渐变背景
  flexibleSpace: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: [
          Theme.of(context).primaryColor, // 起始颜色
          // 默认背景色
          Theme.of(context).colorScheme.onPrimary,
        ],
      ),
    ),
  ),
)

第二种方案直接简单粗暴，获得AppBar的高度，然后body中使用层叠布局，把需要渐变的区域位移上去

final appBar = AppBar(
  backgroundColor: Colors.transparent,
  title: const Text('appTitle').tr());
var safeTopAreaHeight = appBar.preferredSize.height + MediaQuery.of(context).padding.top;

return Scaffold(
    appBar: appBar,
    body: Stack(children: [
      /// 首先使状态栏透明，绘制一个渐变区域位移上去即可
      Transform.translate(
        offset: Offset(0, -(safeTopAreaHeight)),
        child: DecoratedBox(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                Theme.of(context).primaryColor, // 起始颜色
                // 默认背景色
                Theme.of(context).colorScheme.surface,
              ],
            ),
          ),
          child: const SizedBox(height: 250, width: double.infinity),
        ),
      ),
      /// body内容
      ...
    ]))

返回两次退出程序

在应用主界面很多App都是4s内返回两次直接退出程序，这个功能直接可以使用flutter中的PopScope就可以实现

/// 返回键退出
bool closeOnConfirm() {
  DateTime now = DateTime.now();
  /// 两次间隔大于4秒, 退出请求无效
  if (currentBackPressTime == null ||
      now.difference(currentBackPressTime!) > const Duration(seconds: 4)) {
    currentBackPressTime = now;
    ScaffoldMessenger.of(context)
        .showSnackBar(SnackBar(content: const Text('confirmExitApp').tr()));
    return false;
  }
  /// 退出请求有效
  currentBackPressTime = null;
  return true;
}
void onPopInvokedWithResult(bool didPop, Object? result) {
  if (closeOnConfirm()) {
    // 系统级别导航栈 退出程序
    SystemNavigator.pop();
  }
}
/// 然后直接使用PopScope包裹Scaffold
return PopScope(
    canPop: false,
    onPopInvokedWithResult: onPopInvokedWithResult,
    child: Scaffold());

监听设备原生的音量加减按键

我以为这种简单的功能会有插件支持，结果翻了一圈都是监听音量变化的插件。还是的需要自己原生写代码。在原生安卓的入口kt代码里面加入下述代码

import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import android.os.Handler
import io.flutter.plugin.common.EventChannel
import android.os.Looper
import android.view.KeyEvent

class MainActivity: FlutterActivity() {
    private val uiThreadHandler = Handler(Looper.getMainLooper())

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {　
        //
        EventChannel(flutterEngine.dartExecutor.binaryMessenger, "volume_button")
            .setStreamHandler(volumeStreamHandler)
        // super
        super.configureFlutterEngine(flutterEngine)
    }

    // volume_buttons
    private var volumeEvents: EventChannel.EventSink? = null

    private val volumeStreamHandler = object : EventChannel.StreamHandler {

        override fun onListen(arguments: Any?, events: EventChannel.EventSink?) {
            volumeEvents = events
        }

        override fun onCancel(arguments: Any?) {
            volumeEvents = null
        }
    }

    override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean {
        volumeEvents?.let {
            if (keyCode == KeyEvent.KEYCODE_VOLUME_DOWN) {
                uiThreadHandler.post {
                    it.success("DOWN")
                }
                return true
            }
            if (keyCode == KeyEvent.KEYCODE_VOLUME_UP) {
                uiThreadHandler.post {
                    it.success("UP")
                }
                return true
            }
        }
        return super.onKeyDown(keyCode, event)
    }
}

然后flutter中需要使用的地方监听一下就行了

import 'dart:async';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class VolumeListen extends StatefulWidget {
  /// 监听安卓手机音量键
  ///
  /// [child] 监听的组件
  ///
  /// [onKeyEvent] 音量键事件回调
  const VolumeListen({super.key, required this.child, this.onKeyEvent});

  final Widget child;
  final Function(LogicalKeyboardKey logicalKey)? onKeyEvent;
  @override
  _VolumeListenState createState() => _VolumeListenState();
}

class _VolumeListenState extends State<VolumeListen> {
  // 仅支持安卓
  // 监听后会拦截安卓手机音量键
  // event可能为DOWN/UP
  var _volumeListenCount = 0;

  void _onVolumeEvent(dynamic args) {
    if (widget.onKeyEvent == null || args is! String) return;
    if (args == 'UP') {
      widget.onKeyEvent!(LogicalKeyboardKey.audioVolumeUp);
    } else if (args == 'DOWN') {
      widget.onKeyEvent!(LogicalKeyboardKey.audioVolumeDown);
    }
  }

  EventChannel volumeButtonChannel = const EventChannel("volume_button");
  StreamSubscription? volumeS;
  // 添加监听
  void addVolumeListen() {
    _volumeListenCount++;
    if (_volumeListenCount == 1) {
      volumeS =
          volumeButtonChannel.receiveBroadcastStream().listen(_onVolumeEvent);
    }
  }

  // 移除监听
  void delVolumeListen() {
    _volumeListenCount--;
    if (_volumeListenCount == 0) {
      volumeS?.cancel();
    }
  }

  @override
  void dispose() {
    if (Platform.isAndroid) {
      delVolumeListen();
    }
    super.dispose();
  }

  @override
  void initState() {
    if (Platform.isAndroid) {
      addVolumeListen();
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return KeyboardListener(
      focusNode: FocusNode(),
      autofocus: true,
      onKeyEvent: (event) {
        if (widget.onKeyEvent != null) widget.onKeyEvent!(event.logicalKey);
      },
      child: widget.child,
    );
  }
}