Flutter 创建透明的路由页面
2023-09-14 08:58:44 时间
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('home page'),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.dialer_sip),
onPressed: () {
Navigator.of(context).push(SimpleRoute(
name: 'aaa',
title: 'aaa',
builder: (_) {
return Scaffold(
backgroundColor: Colors.transparent,
body: Center(
child: Container(
padding: EdgeInsets.all(12.0),
color: Colors.black,
child: Text(
'data',
style: TextStyle(color: Colors.white),
),
),
),
);
},
));
},
),
);
}
}
class SimpleRoute extends PageRoute {
SimpleRoute({
@required this.name,
@required this.title,
@required this.builder,
}) : super(
settings: RouteSettings(name: name),
);
final String title;
final String name;
final WidgetBuilder builder;
@override
String get barrierLabel => null;
@override
bool get opaque => false;
@override
bool get maintainState => true;
@override
Duration get transitionDuration => Duration(milliseconds: 0);
@override
Widget buildPage(
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
) {
return Title(
title: title,
color: Theme.of(context).primaryColor,
child: builder(context),
);
}
/// 页面切换动画
@override
Widget buildTransitions(
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) {
return FadeTransition(
opacity: animation,
child: child,
);
}
@override
Color get barrierColor => null;
}
相关文章
- Flutter Android Toast Message(flutter访问Android Toast Message)
- 追踪路由的2种方法
- Zuul默认路由规则
- ASP.NET Core路由中间件[1]: 终结点与URL的映射
- SAP Spartacus B2B Unit List跳转到Unit Detail页面的路由执行逻辑
- Express app.get 进行路由 Route 设置
- SAP UI5 应用开发教程之七十 - 如何使用按钮控件触发页面路由跳转试读版
- Flutter进阶第5篇: 使用WebView组件flutter_inappbrowser加载远程web页面渲染新闻详情数据
- Flutter之 flutter_after_layout组件的作用:监听页面渲染的第一帧
- Flutter实战之go_router路由组件入门指南
- Flutter之Fluro路由组件入门指南
- 【Android Gradle 插件】组件化中的 Gradle 构建脚本实现 ④ ( 使用路由实现组件间通信 | 引入 ARoute 框架 | Gradle 构建脚本优化问题 )
- react如何监听路由url变化
- 路由控制——路由策略与策略路由
- WPF 中的 路由事件
- 谈谈vue的路由守卫和keep-alive后生命周期
- Spring Cloud Gateway的常用路由断言工厂
- 计算机网络 网络层 静态路由及配置静态路由