diff --git a/lib/components/pageRoute/fadePageRoute/index.dart b/lib/components/pageRoute/fadePageRoute/index.dart new file mode 100644 index 0000000..7d0ca28 --- /dev/null +++ b/lib/components/pageRoute/fadePageRoute/index.dart @@ -0,0 +1,48 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +class FadePageRoute extends PageRoute { + FadePageRoute({ + required this.builder, + this.transitionDuration = const Duration(milliseconds: 300), + this.opaque = true, + this.barrierDismissible = false, + this.barrierColor, + this.barrierLabel, + this.maintainState = true, + }); + + final WidgetBuilder builder; + + @override + final Duration transitionDuration; + + @override + final bool opaque; + + @override + final bool barrierDismissible; + + @override + final Color? barrierColor; + + @override + final String? barrierLabel; + + @override + final bool maintainState; + + @override + Widget buildPage(BuildContext context, Animation animation, + Animation secondaryAnimation) => + builder(context); + + @override + Widget buildTransitions(BuildContext context, Animation animation, + Animation secondaryAnimation, Widget child) { + return FadeTransition( + opacity: animation, + child: builder(context), + ); + } +} diff --git a/lib/main.dart b/lib/main.dart index 8abfadc..cfb4bb9 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,8 +1,11 @@ import 'package:flutter/material.dart'; // constants import 'package:flutter_app/constants/color.dart'; +// components +import 'package:flutter_app/components/pageRoute/fadePageRoute/index.dart'; // pages import 'package:flutter_app/pages/demo/dashLine/index.dart'; +import 'package:flutter_app/pages/demo/routePage/index.dart'; void main() { runApp(const MyApp()); @@ -17,15 +20,6 @@ class MyApp extends StatelessWidget { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( - // This is the theme of your application. - // - // Try running your application with "flutter run". You'll see the - // application has a blue toolbar. Then, without quitting the app, try - // changing the primarySwatch below to Colors.green and then invoke - // "hot reload" (press "r" in the console where you ran "flutter run", - // or simply save your changes to "hot reload" in a Flutter IDE). - // Notice that the counter didn't reset back to zero; the application - // is not restarted. primarySwatch: Colors.blue, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), @@ -36,15 +30,6 @@ class MyApp extends StatelessWidget { class MyHomePage extends StatefulWidget { const MyHomePage({Key? key, required this.title}) : super(key: key); - // This widget is the home page of your application. It is stateful, meaning - // that it has a State object (defined below) that contains fields that affect - // how it looks. - - // This class is the configuration for the state. It holds the values (in this - // case the title) provided by the parent (in this case the App widget) and - // used by the build method of the State. Fields in a Widget subclass are - // always marked "final". - final String title; @override @@ -56,74 +41,73 @@ class _MyHomePageState extends State { void _incrementCounter() { setState(() { - // This call to setState tells the Flutter framework that something has - // changed in this State, which causes it to rerun the build method below - // so that the display can reflect the updated values. If we changed - // _counter without calling setState(), then the build method would not be - // called again, and so nothing would appear to happen. _counter++; }); } + Widget renderLinkItem(String text) { + return Container( + margin: const EdgeInsets.only(top: 8), + width: 200, + decoration: BoxDecoration( + color: ColorConstant.primaryColor.withOpacity(0.3), + ), + alignment: Alignment.center, + child: Text( + text, + style: Theme.of(context).textTheme.headline6, + ), + ); + } + @override Widget build(BuildContext context) { - // This method is rerun every time setState is called, for instance as done - // by the _incrementCounter method above. - // - // The Flutter framework has been optimized to make rerunning build methods - // fast, so that you can just rebuild anything that needs updating rather - // than having to individually change instances of widgets. return Scaffold( appBar: AppBar( - // Here we take the value from the MyHomePage object that was created by - // the App.build method, and use it to set our appbar title. title: Text(widget.title), ), - body: Center( - // Center is a layout widget. It takes a single child and positions it - // in the middle of the parent. - child: Column( - // Column is also a layout widget. It takes a list of children and - // arranges them vertically. By default, it sizes itself to fit its - // children horizontally, and tries to be as tall as its parent. - // - // Invoke "debug painting" (press "p" in the console, choose the - // "Toggle Debug Paint" action from the Flutter Inspector in Android - // Studio, or the "Toggle Debug Paint" command in Visual Studio Code) - // to see the wireframe for each widget. - // - // Column has various properties to control how it sizes itself and - // how it positions its children. Here we use mainAxisAlignment to - // center the children vertically; the main axis here is the vertical - // axis because Columns are vertical (the cross axis would be - // horizontal). - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - 'You have pushed the button this many times:', - style: TextStyle( - color: ColorConstant.primaryColor, + body: SingleChildScrollView( + child: Container( + width: double.infinity, + height: 1000, + color: ColorConstant.negativeColor.withOpacity(0.3), + child: Column( + children: [ + const SizedBox(height: 10), + Text( + 'You have pushed the button this many times:', + style: TextStyle( + color: ColorConstant.primaryColor, + ), ), - ), - Text( - '$_counter', - style: Theme.of(context).textTheme.headline4, - ), - InkWell( - onTap: () { - Navigator.push( - context, - MaterialPageRoute( - builder: (context) => const DashLinePage(), - ), - ); - }, - child: Text( - '去虚线', + Text( + '$_counter', style: Theme.of(context).textTheme.headline4, ), - ) - ], + InkWell( + onTap: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => const DashLinePage(), + ), + ); + }, + child: renderLinkItem('去虚线'), + ), + InkWell( + onTap: () { + Navigator.push( + context, + FadePageRoute( + builder: (context) => const RoutePage(), + ), + ); + }, + child: renderLinkItem('渐变自定义路由'), + ), + ], + ), ), ), floatingActionButton: FloatingActionButton( diff --git a/lib/pages/demo/dashLine/index.dart b/lib/pages/demo/dashLine/index.dart index 12cf49d..6a8ff61 100644 --- a/lib/pages/demo/dashLine/index.dart +++ b/lib/pages/demo/dashLine/index.dart @@ -1,5 +1,4 @@ import 'package:flutter/material.dart'; -import 'package:flutter/services.dart'; // constants import 'package:flutter_app/constants/color.dart'; // components @@ -12,11 +11,7 @@ class DashLinePage extends StatefulWidget { DashLinePageState createState() => DashLinePageState(); } -class DashLinePageState extends State - with AutomaticKeepAliveClientMixin { - @override - bool get wantKeepAlive => true; // 保持应用状态 - +class DashLinePageState extends State { @override void initState() { super.initState(); @@ -24,22 +19,17 @@ class DashLinePageState extends State @override Widget build(BuildContext context) { - super.build(context); - return AnnotatedRegion( - value: SystemUiOverlayStyle.light, // 修改状态栏字体颜色 - child: Scaffold( - appBar: AppBar( - title: const Text('虚线'), - automaticallyImplyLeading: false, - ), - body: SingleChildScrollView( - child: Container( - height: 62, - color: Colors.red.withOpacity(0.3), - margin: const EdgeInsets.symmetric(horizontal: 2), - child: DashLine( - color: ColorConstant.strongColor, - ), + return Scaffold( + appBar: AppBar( + title: const Text('虚线'), + ), + body: SingleChildScrollView( + child: Container( + height: 62, + color: Colors.red.withOpacity(0.3), + margin: const EdgeInsets.symmetric(horizontal: 2), + child: DashLine( + color: ColorConstant.strongColor, ), ), ), diff --git a/lib/pages/demo/routePage/index.dart b/lib/pages/demo/routePage/index.dart new file mode 100644 index 0000000..7212348 --- /dev/null +++ b/lib/pages/demo/routePage/index.dart @@ -0,0 +1,58 @@ +import 'package:flutter/material.dart'; +// constants +import 'package:flutter_app/constants/color.dart'; +// pages +import 'package:flutter_app/pages/demo/dashLine/index.dart'; + +class RoutePage extends StatefulWidget { + const RoutePage({Key? key}) : super(key: key); + + @override + RoutePageState createState() => RoutePageState(); +} + +class RoutePageState extends State { + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: const Text('自定义路由动画'), + ), + body: SingleChildScrollView( + child: Container( + width: double.infinity, + height: 1000, + color: ColorConstant.strongColor.withOpacity(0.3), + margin: const EdgeInsets.symmetric(horizontal: 2), + child: Column( + children: [ + InkWell( + onTap: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => const DashLinePage(), + ), + ); + }, + child: Container( + margin: const EdgeInsets.only(top: 8), + width: 200, + height: 60, + decoration: BoxDecoration( + color: ColorConstant.primaryColor, + ), + alignment: Alignment.center, + child: Text( + '去虚线', + style: Theme.of(context).textTheme.headline6, + ), + ), + ), + ], + ), + ), + ), + ); + } +}