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

How to align icons with richtext in two columns in Flutter?

I am having difficulties to align my icons with my two lines rich text in Flutter. As you can seen in the picture below, I want to align my ONE richtext widget with ONE icon. Example: Richtext containing "Revision Notes" and "Free notes." should be in the same line as the green icon tick. If I try using just one liner of text, the tick will align with it, but now if I have two liners rich text, it won’t align.

Appreciate any help!

Picture:
enter image description here

Code:

              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        RichText(
                          text: TextSpan(
                            style: DefaultTextStyle.of(context).style,
                            children: const <TextSpan>[
                              TextSpan(
                                  text: 'Revision notesn',
                                  style: TextStyle(
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold)),
                              TextSpan(text: 'Free notes.'),
                            ],
                          ),
                        ),
                      
                        RichText(
                          text: TextSpan(
                            style: DefaultTextStyle.of(context).style,
                            children: const <TextSpan>[
                              TextSpan(
                                  text: 'Quizzesn',
                                  style: TextStyle(
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold)),
                              TextSpan(text: 'Free quizzes.'),
                            ],
                          ),
                        ),
                        RichText(
                          text: TextSpan(
                            style: DefaultTextStyle.of(context).style,
                            children: const <TextSpan>[
                              TextSpan(
                                  text: 'No Adsn',
                                  style: TextStyle(
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold)),
                              TextSpan(text: 'All annoying ads gone.'),
                            ],
                          ),
                        ),
                        RichText(
                          text: TextSpan(
                            style: DefaultTextStyle.of(context).style,
                            children: const <TextSpan>[
                              TextSpan(
                                  text: '10 Flashcardsn',
                                  style: TextStyle(
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold)),
                              TextSpan(text: 'Create your own 10 flashcards.'),
                            ],
                          ),
                        ),
                        RichText(
                          text: TextSpan(
                            style: DefaultTextStyle.of(context).style,
                            children: const <TextSpan>[
                              TextSpan(
                                  text: 'Textbooksn',
                                  style: TextStyle(
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold)),
                              TextSpan(text: 'Download all textbooks in PDF.'),
                            ],
                          ),
                        ),
                          RichText(
                          text: TextSpan(
                            style: DefaultTextStyle.of(context).style,
                            children: const <TextSpan>[
                              TextSpan(
                                  text: 'State Trial Papersn',
                                  style: TextStyle(
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold)),
                              TextSpan(text: 'Download all trial papers in PDF.'),
                            ],
                          ),
                        ),
                      ],
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Icon(
                          Icons.done_rounded,
                          color: Colors.green,
                          size: 24.0,
                        ),
                        Icon(
                          Icons.done_rounded,
                          color: Colors.green,
                          size: 24.0,
                        ),
                        Icon(
                          Icons.done_rounded,
                          color: Colors.green,
                          size: 24.0,
                        ),
                        Icon(
                          Icons.done_rounded,
                          color: Colors.green,
                          size: 24.0,
                        ),
                        Icon(
                          Icons.close,
                          color: Colors.red,
                          size: 24.0,
                        ),
                        Icon(
                          Icons.close,
                          color: Colors.red,
                          size: 24.0,
                        ),
                      ],
                    ),
                  ]),
Tags:

3

Answers


  1. 0

    Use a Row and put a Space between them (i used a Spacer here, you can use a SizedBox or something like that):

     Row(
                        children: [
                          RichText(
                          text: TextSpan(
                            style: DefaultTextStyle.of(context).style,
                            children: const <TextSpan>[
                              TextSpan(
                                  text: 'Revision notesn',
                                  style: TextStyle(
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold)),
                              TextSpan(text: 'Free notes.'),
                            ],
                          ),
                        ),
                          Spacer(),
                          Icon(
                          Icons.close,
                          color: Colors.red,
                          size: 24.0,
                        ),
                        ],
                        ),
    Login or Signup to reply.
  2. 0

    Solution 1

    I would first try to put the rich text widget and the corresponding icon in one Row centering elements vertically, instead of two separate columns which makes it a little more complicated. Like this (just 1 a row example):

    Column(
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          RichText(
            text: TextSpan(
              style: DefaultTextStyle.of(context).style,
              children: const <TextSpan>[
                TextSpan(
                    text: 'Revision notesn',
                    style: TextStyle(
                        fontSize: 20, fontWeight: FontWeight.bold)),
                TextSpan(text: 'Free notes.'),
              ],
            ),
          ),
          const Icon(
            Icons.done_rounded,
            color: Colors.green,
            size: 24.0,
          ),
        ],
      ),
    ],
  )

    The mainAxisAlignment attribute will align your elements pushing them one to the left and one to the right of the screen.

    The crossAxisAlignment attribute will align the element by centering them vertically.

    Solution 2

    If you still need two columns, then you can read the heights of the single rows on the left with LayoutBuilder and use that size for the height of the icon.
    Another way is giving all rows fixed height since you always have title and subtitle of the same sizes (better test smaller screens for this one), so you work around the problem entirely. I would leave this one as last solution.

    Login or Signup to reply.
  3. 0

    I recommend that you make a widget for create each line, so your code will be more readable. Look my example:

        class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Material App Bar'),
        ),
        backgroundColor: Colors.amber,
        body: SizedBox(
          width: 300,
          child: ListView(
            children: const [

              CustomListTile(
                title: 'Revision notes', 
                subtitle: 'Free notes', 
                trailing: Icon( Icons.check, color: Colors.greenAccent, )),
              
              CustomListTile(
                title: 'Quizzes', 
                subtitle: 'Free quizzes', 
                trailing: Icon( Icons.check, color: Colors.greenAccent, )),
              
              CustomListTile(
                title: 'No Ads', 
                subtitle: 'All ... ', 
                trailing: Icon( Icons.check, color: Colors.greenAccent, )),
              
              CustomListTile(
                title: 'Flashcards', 
                subtitle: 'Create your own...', 
                trailing: Icon( Icons.close, color: Colors.redAccent, )),
              
              CustomListTile(
                title: 'Textbooks', 
                subtitle: 'Download all ...', 
                trailing: Icon( Icons.close, color: Colors.redAccent, )),
                
            ],
          ),
        ),
      ),
    );
  }
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

class CustomListTile extends StatelessWidget {
  const CustomListTile({
    super.key, 
    required this.title, 
    required this.subtitle, 
    required this.trailing
  });
  final String title;
  final String subtitle;
    final Icon trailing;
  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text( title, style: const TextStyle( fontSize: 20 ), ),
      subtitle: Text( subtitle,  style: const TextStyle( fontSize: 14 ), ),
      trailing: trailing,
    );
  }
}

    This was my output:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search