如何修改Flutter中launchUrl的WebView动画方向？

url_launcher插件本身确实没有提供自定义WebView滑入动画的配置项，要实现你要的效果，得换个思路——自己封装WebView页面，通过Flutter的路由系统来控制动画。

具体实现步骤：

• 引入webview_flutter插件（或其他你偏好的WebView组件），替代url_launcher的默认WebView行为。
• 根据用户登录状态，选择不同的路由方式打开WebView页面：
  • 已登录状态：使用常规的Navigator.push方法，默认就是从右向左滑入的动画。
  • 未登录状态：使用showModalBottomSheet（或自定义模态路由），实现从底部向上滑入的模态框效果。

示例代码 #

首先在pubspec.yaml中添加依赖：

dependencies:
  webview_flutter: ^4.4.0

然后实现核心逻辑：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

// 假设这是你的登录状态判断变量
bool isUserLoggedIn = false;

void openTargetUrl(BuildContext context, String url) {
  if (isUserLoggedIn) {
    // 已登录：常规路由，右滑入
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => WebViewPage(url: url),
      ),
    );
  } else {
    // 未登录：模态底部弹窗，上滑入
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (context) => SizedBox(
        height: MediaQuery.of(context).size.height * 0.8,
        child: WebViewPage(url: url),
      ),
    );
  }
}

// 自定义WebView页面
class WebViewPage extends StatefulWidget {
  final String url;
  const WebViewPage({super.key, required this.url});

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(Uri.parse(widget.url));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('网页')),
      body: WebViewWidget(controller: controller),
    );
  }
}

如果觉得showModalBottomSheet的样式不够贴合需求，还可以自定义路由动画：

// 自定义底部滑入路由
class BottomSlideRoute extends PageRouteBuilder {
  final Widget page;
  BottomSlideRoute({required this.page})
      : super(
          pageBuilder: (context, animation, secondaryAnimation) => page,
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            var begin = const Offset(0.0, 1.0);
            var end = Offset.zero;
            var curve = Curves.ease;

            var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

            return SlideTransition(
              position: animation.drive(tween),
              child: child,
            );
          },
        );
}

// 使用自定义路由
Navigator.push(
  context,
  BottomSlideRoute(page: WebViewPage(url: url)),
);

这种方式能完全根据登录状态控制WebView的滑入动画，比依赖url_launcher的默认行为更灵活。

内容的提问来源于stack exchange，提问作者lilbiscuit