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

Flutter – Text under text next to an icon

I have a problem. I want to create a setting UI. Unfortunately my does not look like what I want.
I want on the left side an icon and on the right side of the icon there should be a text and below another small text.

Unfortunately if I am running my code it does not look like. The first container is over the complete page – so how could I create the design?

enter image description here

class SettingRoute extends StatefulWidget {
  const SettingRoute({Key? key}) : super(key: key);

  @override
  State<SettingRoute> createState() => _SettingRoute();
}

class _SettingRoute extends State<SettingRoute> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    //print("called");
    return Scaffold(
      appBar: AppBar(
          centerTitle: true,
          backgroundColor: Colors.black,
          systemOverlayStyle:
              const SystemUiOverlayStyle(statusBarColor: Colors.black),
          leading: IconButton(
            icon: Image.asset('assets/logo.png'),
            onPressed: null,
          ),
          title: Text("My App",
              style: const TextStyle(color: Colors.white),
              textAlign: TextAlign.center)),
      body: Container(
        margin: const EdgeInsets.all(30.0),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey),
          borderRadius: const BorderRadius.all(
              Radius.circular(5.0) //                 <--- border radius here
              ),
          color: Colors.white,
        ),
        child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Container(
                margin:
                    const EdgeInsets.only(left: 12.0, top: 12.0, bottom: 12.0),
                child: const Icon(
                  Icons.access_time,
                  color: Colors.black,
                  size: 50.0,
                ),
              ),
              /*Container(
                margin:
                    const EdgeInsets.only(left: 6.0, top: 12.0, bottom: 12.0),
                child: const Text(
                  "Last change",
                  style: TextStyle(color: Colors.black, fontSize: 12),
                ),
              ),*/
              Container(
                padding: EdgeInsets.all(20),
                child: Column(
                  children: [
                    const Text("test"),

                    Container(height: 20), //space between text field

                    const Text("sad"),
                  ],
                ),
              ),
             
            ]),
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    Why you are not using ListTile?

    class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Settings'),
      ),
      body: ListView(
        children: [
          _buildSettingsItem(
            Icons.person,
            'Profile',
            'Manage your profile',
            () {},
          ),
          _buildSettingsItem(
            Icons.notifications,
            'Notifications',
            'Manage your notification settings',
            () {},
          ),
        ],
      ),
    );
  }

  Widget _buildSettingsItem(
    IconData icon,
    String title,
    String subtitle,
    Function onTap,
  ) =>
      ListTile(
        leading: Icon(icon),
        title: Text(title),
        subtitle: Text(subtitle),
        onTap: onTap,
      );
}
    Login or Signup to reply.
  2. 0

    For this kind of design a ListTile is typically used. Replace your Row with

            const ListTile(
              leading: Icon(
                  Icons.access_time,
                  color: Colors.black,
                  size: 50.0,
              ),
              title: Text("test"),
              subtitle: Text("sad"),
        ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search