Settings UI

 Settings UI|MI Settings|Card UI:

Video:

Code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHome(),
    );
  }
}

class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Settings",
          style: TextStyle(
            color: Colors.black,
          ),
        ),
        backgroundColor: Colors.white,
      ),
      backgroundColor: Colors.blueGrey,
      body: ListView(
        padding: EdgeInsets.all(16.0),
        children: <Widget>[
          Text(
            "System",
            style: TextStyle(
              fontSize: 24.0,
              color: Colors.white,
            ),
          ),
          Card(
            color: Colors.white,
            elevation: 4.0,
            child: Column(
              children: <Widget>[
                ListTile(
                  leading: Icon(
                    Icons.phone_android,
                    color: Colors.blue,
                  ),
                  title: Text("About phone"),
                  trailing: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Text("MIUI Global 11.0.6"),
                      Icon(Icons.arrow_forward_ios)
                    ],
                  ),
                ),
                ListTile(
                  leading: Icon(
                    Icons.file_upload,
                    color: Colors.deepOrange,
                  ),
                  title: Text("System apps updater"),
                  trailing: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      CircleAvatar(
                        radius: 12.0,
                        backgroundColor: Colors.red,
                        child: Text(
                          "3",
                        ),
                      ),
                      Icon(Icons.arrow_forward_ios)
                    ],
                  ),
                ),
                ListTile(
                  leading: Icon(
                    Icons.security,
                    color: Colors.green,
                  ),
                  title: Text("Security & status"),
                  trailing: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Text("MIUI Global 11.0.6"),
                      Icon(Icons.arrow_forward_ios)
                    ],
                  ),
                ),
              ],
            ),
          ),
          ////////    Padding(
            padding: EdgeInsets.all(16.0),
          ),
          Text(
            "Network",
            style: TextStyle(
              fontSize: 24.0,
              color: Colors.white,
            ),
          ),
          Card(
            color: Colors.white,
            elevation: 4.0,
            child: Column(
              children: <Widget>[
                ListTile(
                  leading: Icon(
                    Icons.sim_card,
                    color: Colors.yellow,
                  ),
                  title: Text("SIM card & mobile network"),
                  trailing: Icon(Icons.arrow_forward_ios),
                ),
                ListTile(
                  leading: Icon(
                    Icons.wifi,
                    color: Colors.blue,
                  ),
                  title: Text("WI-FI"),
                  trailing: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Text(
                        "off",
                      ),
                      Icon(Icons.arrow_forward_ios)
                    ],
                  ),
                ),
                ListTile(
                    leading: Icon(
                      Icons.bluetooth,
                      color: Colors.blue,
                    ),
                    title: Text("Bluetooth"),
                    trailing: Icon(Icons.arrow_forward_ios)),
                ListTile(
                    leading: Icon(
                      Icons.cast_connected,
                      color: Colors.deepOrange,
                    ),
                    title: Text("Connection & sharing"),
                    trailing: Icon(Icons.arrow_forward_ios)),
              ],
            ),
          ),
          //////     Padding(
            padding: EdgeInsets.all(16.0),
          ),
          Text(
            "General",
            style: TextStyle(
              fontSize: 24.0,
              color: Colors.white,
            ),
          ),
          Card(
            color: Colors.white,
            elevation: 4.0,
            child: Column(
              children: <Widget>[
                ListTile(
                  leading: Icon(
                    Icons.lock,
                    color: Colors.red,
                  ),
                  title: Text("Lock screen"),
                  trailing: Icon(Icons.arrow_forward_ios),
                ),
                ListTile(
                  leading: Icon(
                    Icons.surround_sound,
                    color: Colors.green,
                  ),
                  title: Text("Sound & vibration"),
                  trailing: Icon(Icons.arrow_forward_ios),
                ),
                ListTile(
                    leading: Icon(
                      Icons.notifications_active,
                      color: Colors.blueAccent,
                    ),
                    title: Text("Notifications"),
                    trailing: Icon(Icons.arrow_forward_ios)),
                ListTile(
                    leading: Icon(
                      Icons.home,
                      color: Colors.deepPurple,
                    ),
                    title: Text("Home screen"),
                    trailing: Icon(Icons.arrow_forward_ios)),
                ListTile(
                    leading: Icon(
                      Icons.wallpaper,
                      color: Colors.pink,
                    ),
                    title: Text("Walpaper"),
                    trailing: Icon(Icons.arrow_forward_ios)),
                ListTile(
                    leading: Icon(
                      Icons.color_lens,
                      color: Colors.blue,
                    ),
                    title: Text("Themes"),
                    trailing: Icon(Icons.arrow_forward_ios)),
              ],
            ),
          ),
          //////  Padding(
            padding: EdgeInsets.all(16.0),
          ),
          Text(
            "Security",
            style: TextStyle(
              fontSize: 24.0,
              color: Colors.white,
            ),
          ),
          Card(
            color: Colors.white,
            elevation: 4.0,
            child: Column(
              children: <Widget>[
                ListTile(
                  leading: Icon(
                    Icons.fingerprint,
                    color: Colors.deepPurple,
                  ),
                  title: Text("Password & security"),
                  trailing: Icon(Icons.arrow_forward_ios),
                ),
                ListTile(
                  leading: Icon(
                    Icons.battery_charging_full,
                    color: Colors.greenAccent,
                  ),
                  title: Text("Battery & performance"),
                  trailing: Icon(Icons.arrow_forward_ios),
                ),
                ListTile(
                    leading: Icon(
                      Icons.settings_applications,
                      color: Colors.blue,
                    ),
                    title: Text("Apps"),
                    trailing: Icon(Icons.arrow_forward_ios)),
                ListTile(
                    leading: Icon(
                      Icons.more_horiz,
                      color: Colors.blueAccent,
                    ),
                    title: Text("Additional setting"),
                    trailing: Icon(Icons.arrow_forward_ios)),
              ],
            ),
          ),
          /////   Padding(
            padding: EdgeInsets.all(16.0),
          ),
          Text(
            "Account",
            style: TextStyle(
              fontSize: 24.0,
              color: Colors.white,
            ),
          ),
          Card(
            color: Colors.white,
            elevation: 4.0,
            child: Column(
              children: <Widget>[
                ListTile(
                  leading: Icon(
                    Icons.account_balance,
                    color: Colors.pink,
                  ),
                  title: Text("Business Account"),
                  trailing: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Text(
                        "0001112223",
                      ),
                      Icon(Icons.arrow_forward_ios)
                    ],
                  ),
                ),
                ListTile(
                  leading: Icon(Icons.account_circle, color: Colors.blue),
                  title: Text("Account & sync"),
                  trailing: Icon(Icons.arrow_forward_ios),
                ),
              ],
            ),
          ),
          ////////////////////////          Padding(
            padding: EdgeInsets.all(16.0),
          ),
          Card(
            color: Colors.white,
            elevation: 4.0,
            child: Column(
              children: <Widget>[
                ListTile(
                  leading: Icon(
                    Icons.feedback,
                    color: Colors.blueAccent,
                  ),
                  title: Text("Services & feedback"),
                  trailing: Icon(Icons.arrow_forward_ios),
                ),
              ],
            ),
          ),

          //////        ],
      ),
    );
  }
}