cara menampilkan widget seperti popup

Question

Saat ini, saya memiliki tampilan kisi. Saat saya mengetuknya, saya menavigasi ke halaman lain menggunakan widget pahlawan.

Di halaman itu, saya hanya memiliki wadah yang menunjukkan informasi tentang petak kisi itu.

Yang saya inginkan adalah agar wadah itu muncul di atas tampilan kisi alih-alih menjadi halaman yang berbeda.

Bagaimana saya bisa meletuskannya seperti itu? Dan jika memungkinkan saya lebih suka menyimpan animasi pahlawan.

Answer 1

Anda harus menggunakan metode showDialog, seperti ini:

InkWell(
 child: GridItem(),
 onTap: () {
  showDialog(
   context: context,
     builder: (context) => AlertDialog(
      content: Hero(child: Card(child: YourWidget()))
     ); // you can use SimpleDialog, specify barrier dismissible etc
 },
)

Berikut ini tautan tentang kelas dialog https://api.flutter.dev/flutter/material/Dialog-class.html

Tentang Pahlawan Saya tidak yakin, karena saya menulisnya seperti dari kepala, tetapi itu harus melakukan trik (sering menambahkan tag yang sama, Anda tidak memerlukan orang tua Kartu jika widget Anda sudah punya satu - Pahlawan membutuhkan widget Material )

Answer 2

Saya memposting apa yang akhirnya saya lakukan karena berhasil.

Apa yang disarankan @Nonstapp dan @Parth berfungsi kecuali untuk transisi Hero karena ini hanya berlaku untuk PageRoutes.

Oleh karena itu, saya menemukan cara lain untuk menampilkan munculan serupa dengan PageRoute.

Widget informasi yang saya tampilkan:

return Padding(
  padding: EdgeInsets.fromLTRB(
      MediaQuery.of(context).size.width / 8,
      MediaQuery.of(context).size.height / 4,
      MediaQuery.of(context).size.width / 8,
      0),
  child: Material(
    color: Colors.transparent,
    child: ...

Padding jelas untuk pemosisian dan widget Material untuk memberikan gaya Material dan widget yang diaktifkan seperti IconButton. Berikan warna transparan pada widget Material.

Beginilah saya menyebutnya:

void seeDetails(BuildContext context, Book book) {
    Navigator.push(
      context,
      PageRouteBuilder(
        fullscreenDialog: true,
        opaque: false,
        pageBuilder: (_, __, ___) => ChangeNotifierProvider.value(
          value: book,
          child: DetailCard(),
        ),
      ),
    );
  }

Saya menggunakan PageRouter untuk menampilkan dialog layar penuh tetapi karena pengaturan saya di sana, hanya kartu informasi yang terlihat.

Sisi negatifnya adalah saya tidak dapat mengaktifkan barrierDismissibleskarena saya berada di rute lain atm.

Ini hasil saya:

Namun, solusi sebenarnya adalah apa yang disarankan @pskink di atas. Ini membutuhkan lebih banyak pengaturan dan penyesuaian dan saya mengalami masalah dengan Penyedia. Inilah cara Anda menerapkannya

Answer 3

Anda dapat menggunakan dialog khusus: -

onPressed: () {
        showDialog(
            context: context,
            builder: (_) => Center(
          child: RaisedButton(
            child: Text("Show dialog"),
            onPressed: () {
              showDialog(
                context: context,
                builder: (context) {
                  return Dialog(
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
                    elevation: 16,
                    child: Container(
                      height: 400.0,
                      width: 360.0,
                      child: ListView(
                        children: <Widget>[
                          SizedBox(height: 20),
                          Center(
                            child: Text(
                              "Leaderboard",
                              style: TextStyle(fontSize: 24, color: Colors.blue, fontWeight: FontWeight.bold),
                            ),
                          ),
                          SizedBox(height: 20),
                          _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 1", score: 1000),
                          _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 2", score: 2000),
                          _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 3", score: 3000),
                          _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 4", score: 4000),
                          _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 5", score: 5000),
                          _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 6", score: 6000),
                        ],
                      ),
                    ),
                  );
                },
              );
            },
          ),
        ),
        );
    }
    
    
    Widget _buildName({String imageAsset, String name, double score}) {
      return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20.0),
        child: Column(
          children: <Widget>[
            SizedBox(height: 12),
            Container(height: 2, color: Colors.redAccent),
            SizedBox(height: 12),
            Row(
              children: <Widget>[
                CircleAvatar(
                  backgroundImage: AssetImage(imageAsset),
                  radius: 30,
                ),
                SizedBox(width: 12),
                Text(name),
                Spacer(),
                Container(
                  padding: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
                  child: Text("${score}"),
                  decoration: BoxDecoration(
                    color: Colors.yellow[900],
                    borderRadius: BorderRadius.circular(20),
                  ),
                ),
              ],
            ),
          ],
        ),
      );
    }