如何在颤动中制作全屏对话框？

2 回答

• 0

  这是实现这一目标的一种方法：

  void main() {
    runApp(MaterialApp(home: MyScreen()));
  }
  
  class MyScreen extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: RaisedButton(
            child: Text('Show Overlay'),
            onPressed: () {
              Navigator.of(context).push<Widget>(PageRouteBuilder<Widget>(
                  opaque: true,
                  transitionDuration: Duration(days: 1),
                  pageBuilder: (BuildContext context, _, __) {
                    return Container(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          Icon(Icons.call_to_action,color: Colors.white,),
                        ],
                      ),
                      color: Colors.black.withOpacity(0.90),
                    );
                  }));
            },
          ),
        ),
      );
    }
  }
  

  您也可以使用 Stack 小部件来获得类似的结果 .

  回复于 2024-04-24T16:29:37+08:00
• 13

  您可以使用 Navigator 来推送半透明的ModalRoute：

  import 'package:flutter/material.dart';
  
  class TutorialOverlay extends ModalRoute<void> {
    @override
    Duration get transitionDuration => Duration(milliseconds: 500);
  
    @override
    bool get opaque => false;
  
    @override
    bool get barrierDismissible => false;
  
    @override
    Color get barrierColor => Colors.black.withOpacity(0.5);
  
    @override
    String get barrierLabel => null;
  
    @override
    bool get maintainState => true;
  
    @override
    Widget buildPage(
        BuildContext context,
        Animation<double> animation,
        Animation<double> secondaryAnimation,
        ) {
      // This makes sure that text and other content follows the material style
      return Material(
        type: MaterialType.transparency,
        // make sure that the overlay content is not cut off
        child: SafeArea(
          child: _buildOverlayContent(context),
        ),
      );
    }
  
    Widget _buildOverlayContent(BuildContext context) {
      return Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(
              'This is a nice overlay',
              style: TextStyle(color: Colors.white, fontSize: 30.0),
            ),
            RaisedButton(
              onPressed: () => Navigator.pop(context),
              child: Text('Dismiss'),
            )
          ],
        ),
      );
    }
  
    @override
    Widget buildTransitions(
        BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
      // You can add your own animations for the overlay content
      return FadeTransition(
        opacity: animation,
        child: ScaleTransition(
          scale: animation,
          child: child,
        ),
      );
    }
  }
  
  
  // Example application:
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Playground',
        home: TestPage(),
      );
    }
  }
  
  class TestPage extends StatelessWidget {
    void _showOverlay(BuildContext context) {
      Navigator.of(context).push(TutorialOverlay());
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: Text('Test')),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Center(
            child: RaisedButton(
              onPressed: () => _showOverlay(context),
              child: Text('Show Overlay'),
            ),
          ),
        ),
      );
    }
  }
  

  回复于 2024-04-24T16:29:37+08:00