Q: how to write rectange UI grid grouped by different element in flutter I find an app's UI like this:

how to write a rectange element with round corner in flutter? Now I write like this:
return Scaffold(
    body: SafeArea(
      child: ListView(
        children: [
          ListTile(
            title: Text("视图"),
            leading: Icon(Feather.grid),
            onTap: () => showDialog(
              context: context,
              builder: (context) {
                return SimpleDialog(
                  title: Text("View"),
                  children: <Widget>[
                    RadioListTile(
                      title: const Text('Card'),
                      value: ViewType.itemCard,
                      onChanged: (value) {
                        Navigator.pop(context);
                      },
                    ),
                    RadioListTile(
                      title: const Text('Compact'),
                      value: ViewType.compactTile,
                      onChanged: (value) {
                        Navigator.pop(context);
                      },
                    ),
                    RadioListTile(
                      title: const Text('Tile'),
                      value: ViewType.itemTile,
                      onChanged: (value) {
                        Navigator.pop(context);
                      },
                    ),
                  ],
                );
              },
            ),
          ),
          ListTile(
            leading: Icon(Feather.user),
            title: Text("我的"),
            onTap: () async {
              Widget page;
              bool isLoggedIn = await Auth.isLoggedIn();
              if (!isLoggedIn) {
                page = LoginPage();
                //page = BottomNavigationDemo(type: BottomNavigationDemoType.withLabels);
              } else {
                var username = await Auth.currentUser();

                //page = ProfilePage(username: "dolphin", isMe: true);
              }
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => page),
              );
            },
          ),
          ListTile(
            leading: Icon(Feather.bookmark),
            title: Text("收藏"),
            onTap: () async {
              var data = {'name': "fav"};
              Widget page = FavArticlePage().buildPage(data);
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => page),
              );
            },
          ),
          ListTile(
            leading: Icon(Feather.archive),
            title: Text("发现"),
            onTap: () async {
              var data = {'name': "originalstories"};
              Widget page = DiscoverPage().buildPage(data);
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => page),
              );
            },
          ),
          ListTile(
            leading: Icon(Feather.mail),
            title: Text("问题反馈"),
            onTap: () async {
              var data = {'name': "feedback"};
              Widget feedback = FeedbackPage().buildPage(data);
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => feedback),
              );
            },
          ),
          ListTile(
            leading: Icon(Feather.award),
            title: Text("关于Cruise"),
            onTap: () async {
              /*Widget page = About();
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => page),
              );*/
            },
          ),
          ListTile(
            leading: Icon(Feather.settings),
            title: Text("设置"),
            onTap: () async {
              Widget page = CustomSetting();
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => page),
              );
            },
          )
        ],
      ),
    ),
  );

but the element did not contains gap and round corner, elements does not grouped by colors 。what should I do to make it the same with design UI ?

A: Assuming you want to add rounded corners to your RadioListTile you can wrap them in a  ClipRRect: https://api.flutter.dev/flutter/widgets/ClipRRect-class.html
e.g.
   ClipRRect(
    borderRadius:BorderRadius.circular(10),
    child: RadioListTile(...

Edit: You can use a Padding-Widget as a Parent of ClipRRect to increase the spacing between the ListTiles.
I'm not entirely sure what you mean by "grouped by color"
