Flutter - GestureDetector ne détecte pas dans l'animation

Question

J'utilise une animation qui remplit en bleu sur l'écran en appuyant sur FloatingActionButton. Et en donnant un autre coup sur le FloatingActionButton le bleu quitte l'écran. Comme le gif ci-dessous:

Je mets un GestureDetector dans l'animation de telle sorte que lorsque l'écran est rempli de bleu, lorsque vous touchez le bleu, il sort de l'écran. Comme j'ai tapé le FloatingActionButton encore.

Cependant, GestureDetector ne détecte aucun tap dans aucune partie du bleu sur l'écran, même si je le mets en onTap:(){print("test")}GestureDetector ne détecte pas.

Quelqu'un pourrait-il m'aider en tapant sur bleu il exécute à nouveau la fonction _up()?

import 'package:flutter/material.dart'; 
import 'dart:ui' as ui; 

void main() { 
    runApp(new MaterialApp(home: new HomePage())); 
} 

class HomePage extends StatefulWidget { 
    @override 
    HomePageState createState() => new HomePageState(); 
} 

class HomePageState extends State<HomePage> with TickerProviderStateMixin { 
    AnimationController _controller; 
    Animation<double> _animation; 
    bool upDown = true; 

    @override 
    void initState() { 
    _controller = new AnimationController(
     vsync: this, 
     duration: const Duration(milliseconds: 180), 
    ); 

    _animation = new CurvedAnimation(
     parent: _controller, 
     curve: new Interval(0.0, 1.0, curve: Curves.linear), 
    ); 
    } 

    @override 
    Widget build(BuildContext context) { 
    final ui.Size logicalSize = MediaQuery.of(context).size; 
    final double _width = logicalSize.width; 
    final double _height = logicalSize.height; 

    void _up(){ 
     setState((){ 
     if(upDown) { 
      upDown = false; 
      _controller.forward(from: 0.0); 
     } else { 
      upDown = true; 
      _controller.reverse(from: 1.0); 
     } 
     }); 
    } 

    return new Scaffold(
     body: new Stack(
      children: <Widget>[ 
       new Positioned(
        bottom: 0.0, 
        child: new GestureDetector(
        onTap: _up, 
        child: new AnimatedBuilder(
         animation: _animation, 
         builder: (BuildContext context, Widget child) { 
         return new Container(
         height: _height, 
         child: new CustomPaint(
          painter: new Sky(_width, _height * _animation.value), 
          child: new Container(
          height: _isRotated ? 0.0 : _height * _animation.value, 
          width: _isRotated ? 0.0 : _width, 
         ), 
         ), 
        ); 
        }, 
       ), 
       ) 
      ), 
       new Positioned(
       bottom: 16.0, 
       right: 16.0, 
       child: new FloatingActionButton(
        backgroundColor: new Color(0xFFE57373), 
        child: new Icon(Icons.add), 
        onPressed:(){ 
        _up(); 
        }, 
       ) 
      ) 
      ] 
     ) 
    ); 
    } 
} 

class Sky extends CustomPainter { 
    final double _width; 
    double _rectHeight; 

    Sky(this._width, this._rectHeight); 

    @override 
    void paint(Canvas canvas, Size size) { 
    canvas.drawRect(
     new Rect.fromLTRB(
      0.0, size.height - _rectHeight, this._width, size.height 
    ), 
     new Paint()..color = new Color.fromRGBO(0, 153, 255, 0.9) 
    ); 
    } 

    @override 
    bool shouldRepaint(Sky oldDelegate) { 
    return _width != oldDelegate._width || _rectHeight != oldDelegate._rectHeight; 
    } 
} 

Answer 1

GestureDetector ne fonctionnera que sur un widget. CustomPaint n'est pas un widget, il était donc nécessaire de mettre dans la propriété child de CustomPaint un widget tel qu'un Container.

Voilà comment CustomPaint:

... 
child: new CustomPaint(
    painter: new Sky(_width, _height * _animation.value), 
    child: new Container(
    height: _isRotated ? 0.0 : _height * _animation.value, 
    width: _isRotated ? 0.0 : _width, 
), 
), 
... 

Answer 2

Il y a déjà quelque chose qui fait le travail pour vous: Échafaudage.

Utilisez Scaffold.of(context).showBottomSheet Et il fait tout ce dont vous avez besoin dans une ligne de code.

Vous pouvez également utiliser showModalBottomSheet (qui semble avoir une limite de hauteur maximale).

void main() { 
    runApp(new MaterialApp(
    home: new Test(), 
)); 
} 

class Test extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(
     title: new Text("data"), 
    ), 
     floatingActionButton: new MyButton(), 
    ); 
    } 
} 

class MyButton extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new FloatingActionButton(
     backgroundColor: Colors.red, 
     onPressed:() => onPressed(context), 
     child: new Icon(Icons.plus_one), 
    ); 
    } 

    void onPressed(BuildContext context) { 
    Scaffold.of(context).showBottomSheet((context) { 
     return new Container(
     color: Colors.cyan, 
    ); 
    }); 
    } 
}