Question 76242 in Flutter Question posted in
The official Flutter documentation can be found here.

is there a way to create grid looking view dynamically in flutter?

I tried to create custom looking grid like this
enter image description here

And if the text is dynamically fetch from API, is there any way to do it?

Tags:

3

Answers


  1. 0

    You can use flutter_staggered_grid_view package.

    Here is a code example in this doc this create custom gridView :

    GridView.custom(
  gridDelegate: SliverQuiltedGridDelegate(
    crossAxisCount: 4,
    mainAxisSpacing: 4,
    crossAxisSpacing: 4,
    repeatPattern: QuiltedGridRepeatPattern.inverted,
    pattern: [
      QuiltedGridTile(2, 2),
      QuiltedGridTile(1, 1),
      QuiltedGridTile(1, 1),
      QuiltedGridTile(1, 2),
    ],
  ),
  childrenDelegate: SliverChildBuilderDelegate(
    (context, index) => Tile(index: index),
  ),
);

    And the result is like this:

    custom grid view

    For more information, here is the link : https://pub.dev/packages/flutter_staggered_grid_view

    Login or Signup to reply.
  2. 0

    Can you try this?

    import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF00B582)),
          chipTheme: ChipThemeData(
              disabledColor: Colors.white,
              selectedColor: const Color(0xFF00B582),
              showCheckmark: false,
              backgroundColor: Colors.white,
              elevation: 4,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(8),
                side: BorderSide(color: Colors.grey.shade300),
              ),
              labelPadding: const EdgeInsets.all(8)),
          useMaterial3: false,
        ),
        home: const MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _items = const <String>[
    "Otomotif",
    "E-commerce",
    "Edukasi",
    "Hiburan",
    "Keshehatan & Kecantikan",
    "Travel",
    "Olahraga",
    "Fashion",
    "Hadiah",
    "Makanan & Minuman",
    "Belanja"
  ];

  final _selected = <String>{};

  @override
  Widget build(BuildContext context) {
    final chipTheme = Theme.of(context).chipTheme;
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            const SizedBox(
              height: 20,
            ),
            Center(
              child: Padding(
                padding: const EdgeInsets.all(5),
                child: Wrap(
                  alignment: WrapAlignment.spaceEvenly,
                  // crossAxisAlignment: WrapCrossAlignment.center,
                  // runAlignment: WrapAlignment.spaceBetween,
                  spacing: 10,
                  runSpacing: 10,
                  clipBehavior: Clip.antiAlias,
                  children: _items.map(
                    (item) {
                      final isSelected = _selected.contains(item);
                      return FilterChip(
                        selected: isSelected,
                        elevation: isSelected ? chipTheme.elevation : 0,
                        shape: isSelected
                            ? RoundedRectangleBorder(
                                side:
                                    const BorderSide(color: Colors.transparent),
                                borderRadius: BorderRadius.circular(8),
                              )
                            : chipTheme.shape,
                        labelStyle: isSelected
                            ? const TextStyle(color: Colors.white, fontSize: 18)
                            : const TextStyle(fontSize: 18),
                        onSelected: (bool value) {
                          if (value) {
                            _selected.add(item);
                          } else {
                            _selected.remove(item);
                          }
                          setState(() {});
                        },
                        label: Text(item),
                      );
                    },
                  ).toList(),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

    Output:
    enter image description here

    Login or Signup to reply.
  3. 0

    Try the FlexList package, I was able to get a similar result to what you want:

    class FlexListTest extends StatelessWidget {
  const FlexListTest({super.key, this.words = const []});

  final List<String> words;
  final textStyle = const TextStyle(fontSize: 20);

  @override
  Widget build(BuildContext context) {
    return FlexList(
      horizontalSpacing: 5,
      verticalSpacing: 10,
      children: words.map((word) => textBox(word)).toList(),
    );
  }

  Widget textBox(String word) {
    return Container(
      padding: const EdgeInsets.all(16.0),
      margin: const EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        color: Random.secure().nextBool() ? Colors.white : Colors.tealAccent,
        borderRadius: BorderRadius.circular(10),
        border: Border.all(
          color: Colors.grey,
        ),
      ),
      child: Text(
        word,
        textAlign: TextAlign.center,
        style: textStyle,
      ),
    );
  }
}

    Then call it where you want it rendered:

    const FlexListTest(words: ['Otomotif', 'E-commerce', 'Edukasi', 'Hiburan', 'Kesehatan & Kecantikan', 'Travel', 'Olahraga', 'Fashion', 'Hadiah', 'Makanan & Minuman', 'Belanja']),

    Output on my emulator:
    enter image description here

    Of course you will have to add your result from the api call, and your logic for whatever you want to do with the tiles etc, I just added a random colour in my code for this test. 🙂

    Link to pub.dev package: https://pub.dev/packages/flex_list

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search