New(er) to Flutter and self-learning. Have tried multiple methods but haven't found the "best option".

See screenshot. I need to produce something similar to this mockup.

Need Icons 3 or 4 wide and multiple rows down with Icons and Text centered below. The Icons need an OnPressed or other actionable code to navigate to another screen/view. The text does not necessarily need to be clickable.

I would appreciate some guidance as to where to begin. Some links or code exmaple would be great but really want to know I'm on the right track with the best possible solution to creating a similar screen.

Thank you in advance.

import 'package:welakaone/drawer/drawer.dart';
import 'package:welakaone/drawer/end_drawer.dart';
import 'package:welakaone/logic/custom_colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
//import 'package:welakaone/navigation/route.dart' as route;

class DirectoryScreen extends StatefulWidget {
  @override
  _DirectoryScreenState createState() => _DirectoryScreenState();
}

class _DirectoryScreenState extends State<DirectoryScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        systemOverlayStyle: SystemUiOverlayStyle.dark,
        backgroundColor: CustomColors.welakaoneBlack,
        title: AppBarTitle(),
        leading: Builder(
          builder: (context) {
            return IconButton(
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
              icon: Icon(Icons.menu),
            );
          },
        ),
        actions: <Widget>[
          Builder(
            builder: (context) {
              return IconButton(
                onPressed: () {
                  Scaffold.of(context).openEndDrawer();
                },
                icon: Icon(Icons.person),
              );
            },
          ),
        ],
      ),
      drawer: new MyDrawer(),
      endDrawer: new MyEndDrawer(
        uid: '',
      ),
      body: SingleChildScrollView(
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [
                CustomColors.welakaoneBlack,
                CustomColors.welakaoneBlueDark,
              ],
              begin: FractionalOffset(0.0, 0.0),
              end: FractionalOffset(1.6, 1.0),
              stops: [0.3, 1.0],
              tileMode: TileMode.clamp,
            ),
          ),
          child: RaisedButton(
            color: Colors.transparent,
            padding: EdgeInsets.all(8.0),
            onPressed: () {},
            // child: Container(
            //   height: 100,
            //   width: 200,
            //   child: Column(
            //     mainAxisSize: MainAxisSize.max,
            //     children: <Widget>[
            //       Padding(
            //         padding: const EdgeInsets.all(4.0),
            //         child: Icon(
            //           Icons.camera,
            //           color: Colors.white,
            //         ),
            //       ),
            //       Padding(
            //         padding: const EdgeInsets.all(2.0),
            //         child: Text(
            //           "Capture from Camera",
            //           style: TextStyle(
            //             color: Colors.yellow,
            //             fontWeight: FontWeight.bold,
            //           ),
            //         ),
            //       ),
            //     ],
            //   ),
            // ),
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

Let's break down your problem to two smaller problems

1. Create 3 Column wide 3 rows of SomeWidget
2. Create a clickable widget for the above layout.

Solutions:

1st Problem : Flutter got a dedicated widget to layout grid like structures called