Est-il possible d'activer le tap en dehors de la feuille de fond?

Nov 28 2020

Je souhaite également permettre aux utilisateurs d' effectuer des actions en dehors de la feuille du bas . Par exemple, dans l'image ci-dessous, je veux que l'utilisateur appuie sur le bouton de lecture . Je ne peux pas faire cela maintenant car la barrière de la feuille de fond bloque le clic sur le bouton de lecture.

  • D'après mes recherches, la feuille du bas est un composant plein écran. Il semble que la hauteur de la moitié de l'écran soit une tromperie. (En rendant la couleur de la barrière transparente et en ajoutant des contraintes de hauteur).
showModalBottomSheet(
      context: context,
      isDismissible: false,
      barrierColor: Colors.transparent,
      builder: (_) {
        return GestureDetector(
          behavior: HitTestBehavior.translucent,
          child: Container(
            constraints: BoxConstraints(maxHeight: height),
            color: Theme.of(context).cardColor,
            child: child.....
          ),
        );
      },
      isScrollControlled: true,
    );

Réponses

3 MuhammetÖmer Nov 28 2020 at 04:23

Je l'ai résolu comme la feuille du bas mais avec une méthode différente. J'espère avoir bien compris la question.

import 'package:flutter/material.dart';
class BottomSheetOutside extends StatefulWidget {
  @override
  _BottomSheetOutsideState createState() => _BottomSheetOutsideState();
}

class _BottomSheetOutsideState extends State<BottomSheetOutside> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> offset;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 1));
    offset = Tween<Offset>(begin: Offset(0.0, 1.0), end: Offset.zero).animate(_controller);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(flex: 4, child: buildTop),
          Expanded(flex: 6, child: buildBottom),
        ],
      ),
    );
  }

  Container get buildTop {
    return Container(
      width: double.infinity,
      color: Colors.red,
      child: IconButton(
        icon: Icon(Icons.play_circle_fill_rounded),
        onPressed: () {
          switch (_controller.status) {
            case AnimationStatus.dismissed:
              _controller.forward();
              break;
            case AnimationStatus.forward:
              break;
            case AnimationStatus.reverse:
              break;
            case AnimationStatus.completed:
              _controller.reverse();
              break;
          }
        },
      ),
    );
  }

  Stack get buildBottom {
    return Stack(children: [
      Container(color: Colors.blue),
      buildBottomSlide,
    ]);
  }

  Widget get buildBottomSlide {
    return SlideTransition(
      position: offset,
      child: Card(
        child: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) => ListTile(
            leading: Icon(Icons.comment),
            title: Text("Test $index"),
          ),
        ),
      ),
    );
  }
}