I am kind of new to flutter and am trying to make a list where all the elements fit on the screen and are evenly and symmetrically placed. I am currently using GridView, but I can't figure out how to change the position of the individual elements. More specifically, I am trying to change the position of the last row so it's symmetrical with the other rows.

Any help or suggestions are appreciated!

    @override
    Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: const Align(
              alignment: Alignment.center,
              child: Text("Alfabeya Kurdî"),
            ),
          ),
          body: GridView.count(
            crossAxisCount: 8,
            childAspectRatio: 3 / 2,
            crossAxisSpacing: 50,
            mainAxisSpacing: 100,
            children: List.generate(
              (_alphabet.length - 1),
              (index) {
                const SizedBox(height: 30);
                return ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Stack(
                    children: <Widget>[
                      Positioned.fill(
                        child: Container(
                          decoration: const BoxDecoration(
                            gradient: LinearGradient(
                              colors: <Color>[
                                Color(0xFF0D47A1),
                                Color(0xFF1976D2),
                                Color(0xFF42A5F5),
                              ],
                            ),
                          ),
                        ),
                      ),
                      Align(
                        alignment: Alignment.bottomCenter,
                        child: TextButton(
                          style: TextButton.styleFrom(
                            padding: const EdgeInsets.all(16.0),
                            primary: Colors.white,
                            textStyle: const TextStyle(fontSize: 20),
                          ),
                          onPressed: () {},
                          child: Text(_alphabet[index]),
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
          ),
        );
      }

This is what my GridView currently looks like

CodePudding user response：

You can use a wrap widget instead which has alignment property

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Align(
            alignment: Alignment.center,
            child: Text("Alfabeya Kurdî"),
          ),
        ),
        body: SizedBox(
          width: MediaQuery.of(context).size.width,
          child: Wrap(
            alignment: WrapAlignment.center,
            direction: Axis.horizontal,
            runSpacing: 10,
            spacing: 50,
            children: List.generate(
              26,
              (index) => Container(
                  height: 60,
                  width: 50,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5),
                    gradient: const LinearGradient(
                      colors: <Color>[
                        Color(0xFF0D47A1),
                        Color(0xFF1976D2),
                        Color(0xFF42A5F5),
                      ],
                    ),
                  ),
                  child: Align(
                    alignment: Alignment.bottomCenter,
                    child: TextButton(
                      style: TextButton.styleFrom(
                        padding: const EdgeInsets.all(10.0),
                        primary: Colors.white,
                        textStyle: const TextStyle(fontSize: 20),
                      ),
                      onPressed: () {},
                      child: Text('$index'),
                    ),
                  )),
            ),
          ),
        ));
  }