Apakah mungkin mengaktifkan ketukan di luar lembar bawah?

Nov 28 2020

Saya ingin memungkinkan pengguna untuk mengambil tindakan di luar lembar bawah juga. Misalnya pada gambar yang ditunjukkan di bawah ini, saya ingin pengguna mengetuk tombol putar . Saya tidak dapat melakukannya sekarang karena penghalang pada lembar bawah menghalangi klik ke tombol putar.

  • Dari penelitian saya, lembaran bawah adalah komponen layar penuh. Tampaknya setengah layar tinggi adalah penipuan. (Dengan membuat warna penghalang menjadi transparan dan menambahkan batasan ketinggian).
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,
    );

Jawaban

3 MuhammetÖmer Nov 28 2020 at 04:23

Saya menyelesaikannya seperti lembaran bawah tetapi dengan metode yang berbeda. Saya harap pertanyaan saya benar.

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"),
          ),
        ),
      ),
    );
  }
}