Saya membuat aplikasi flutter yang memiliki tampilan kisi tombol Cupertino yang semuanya dapat diklik dan ketika diklik meneruskan ke halaman baru. Saya telah berhasil membuat satu tombol Cupertino dengan bantuan artikel ini - https://medium.com/@zhijjjj/flutter-ios- style-clickable-card-35aa151a6116 Saya ingin membuat lebih banyak tombol, tetapi saya tidak dapat melakukannya. Tolong bisakah seseorang membantu saya?

0
Nishit Mistry 5 Juli 2020, 12:53

1 menjawab

Jawaban Terbaik

Anda dapat mencoba GridView dengan cepat

Bagaimana cara menggunakan GridView? Berikut adalah banyak contoh cara menggunakannya

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(

      color: Colors.white30,
      child: GridView.count(
          crossAxisCount: 4,
          childAspectRatio: 1.0,
          padding: const EdgeInsets.all(4.0),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
          children: <String>[
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
          ].map((String url) {
            return GridTile(
                child: Image.network(url, fit: BoxFit.cover));
          }).toList()),
    );
  }
}

enter image description here

EDIT Ditanyakan

jika saya ingin beberapa kartu dengan gambar berbeda di latar belakang dan teks berbeda di atasnya, apakah bisa?

Kemudian Anda dapat menggunakan plugin flutter_staggered_grid_view. Anda dapat menemukannya di sini

new StaggeredGridView.countBuilder(
  crossAxisCount: 4,
  itemCount: 8,
  itemBuilder: (BuildContext context, int index) => new Container(
      color: Colors.green,
      child: new Center(
        child: new CircleAvatar(
          backgroundColor: Colors.white,
          child: new Text('$index'),
        ),
      )),
  staggeredTileBuilder: (int index) =>
      new StaggeredTile.count(2, index.isEven ? 2 : 1),
  mainAxisSpacing: 4.0,
  crossAxisSpacing: 4.0,
)

enter image description here

0
Jasurbek 6 Juli 2020, 13:09