Issue with adding icons and aligning text in flutter

Question

I have just started to learn flutter a couple of days ago and I am trying to build an application. I am using cards for the home page, but I am not quite sure on how to add an Icon inside a card. Also, I have some issues with the positioning of the text. Herewith attaching the code.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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


class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xff3f4040),
        appBar: AppBar(
          centerTitle: true,
          title: Text(
            "Test App",
            style: TextStyle(
                fontWeight: FontWeight.bold,
            fontSize: 25),

          ),
          toolbarHeight: 50,
          actions: [
            IconButton(icon: Icon(
              Icons.account_circle,
              color: Colors.white,
            ), onPressed: (){})
          ],
          backgroundColor: Colors.black54,

        ),
        body: Container(
          margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
          width: double.maxFinite,
          child: Column(
            children: [
              Card(
                color: Colors.black54,
                elevation: 5,
                child: Container(
                  padding: EdgeInsets.fromLTRB(0, 25, 0, 0),
                  width: double.maxFinite,
                  height: 90,

                  child: Column(
                    children: [
                      Text(
                        "Hello",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 25,
                        fontWeight: FontWeight.w700
                      ),)

                    ],
                  ),
                ),
              ),
              Card(
                color: Colors.black54,
                elevation: 5,
                child: Container(
                  padding: EdgeInsets.fromLTRB(0, 25, 0, 0),
                  width: double.maxFinite,
                  height: 90,

                  child: Column(
                    children: [
                      Text(
                        "Hello",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 25,
                            fontWeight: FontWeight.w700
                        ),)
                      

                    ],
                  ),
                ),
              ),
              Card(
                color: Colors.black54,
                elevation: 5,
                child: Container(
                  padding: EdgeInsets.fromLTRB(0, 25, 0, 0),
                  width: double.maxFinite,
                  height: 90,

                  child: Column(
                    children: [
                      Text(
                        "Hello",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 25,
                            fontWeight: FontWeight.w700
                        ),)

                    ],
                  ),
                ),
              ),


            ],
          ),


      ),


    ));
  }
}

Here is a screenshot of how it looks right now. I wish to put the text a little to the left, and also add a trailing icon, which on clicked will redirect to another page. However I am not quite sure how to achieve the result. Would appreciate if you could help me achieve the same.

M. Abdel-Ghani · Answer 1 · 2021-04-08T18:46:02.657

0

Its been a while since I used flutter, but I think what you could do would be to replace the Column that you have in the Card right now with a Row. The text and the icon can then be placed as children of this row, which would make them horizontally aligned.

You might want to set the mainAxisAlignment property of the Row to MainAxisAlignment.spaceBetween, this should place the extra space in the Row between the text and the icon to make the text to the left and the icon to the right. Just make sure that the text precedes the icon in the Row's children.

edited Apr 08 '21 at 18:46

answered Apr 08 '21 at 18:40

M. Abdel-Ghani

187
1
10

Yes, I got that. My other doubt is that how do you add margin and padding for the text and the icon. And what do should I do if I need to add an image before the text – Sahas Vivek Apr 08 '21 at 19:45
Also, when I click on a particular card, how do I route it to another page in my app itself? – Sahas Vivek Apr 08 '21 at 19:56
1

For the padding, you can place each of the text in a separate Padding widget, check out this link, there is a code example too of how it should look like. You can then place the padding widget as the row child: https://stackoverflow.com/questions/50162294/how-do-i-add-margins-to-my-widget-understanding-the-effect-of-edgeinsets – M. Abdel-Ghani Apr 08 '21 at 20:06
1

As for the routing there is a nice recent article about it with nice graphics and code to explain it, check it out here ! https://medium.com/flutter/learning-flutters-new-navigation-and-routing-system-7c9068155ade – M. Abdel-Ghani Apr 08 '21 at 20:10
1

There is also a good video that explains it with live coding : https://youtu.be/nyvwx7o277U – M. Abdel-Ghani Apr 08 '21 at 20:14
1

Ps: Please dont forget to upvote if my answer helped you (: Thank you! – M. Abdel-Ghani Apr 08 '21 at 20:16
Hey, Thank you so much for all the help, but I still have just one more small issue. The thing is I've followed everything mentioned related to named routing, yet the screens are not changing, I'm not too sure why – Sahas Vivek Apr 08 '21 at 20:53
How about asking a new question about it and providing the code there so others could see it? It may be a small glitch somewhere that is causing the issue – M. Abdel-Ghani Apr 08 '21 at 21:03

score 0 · Answer 2 · answered Apr 08 '21 at 19:08

You can easily use ListTile, it gives you Text and Leading, I think you will get the design you want thanks to these, and you can add subtitles with listile. I leave the code below for you to review.

import 'package:flutter/material.dart';

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

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //this code for responsive
    final height = MediaQuery.of(context).size.height; // The size of height
    final width = MediaQuery.of(context).size.width; // The size of width
    return Scaffold(
      backgroundColor: Color(0xff3f4040),
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          "Test App",
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
        ),
        toolbarHeight: 50,
        actions: [
          IconButton(
              icon: Icon(
                Icons.account_circle,
                color: Colors.white,
              ),
              onPressed: () {})
        ],
        backgroundColor: Colors.black54,
      ),
      body: Container(
        margin: EdgeInsets.symmetric(
            horizontal: width * 0.1, vertical: height * 0.1),
        width: double.infinity,
        child: Column(
          children: [
            Card(
                color: Colors.black54,
                elevation: 5,
                child: ListTile(
                  leading: IconButton(
                      icon: Icon(
                        Icons.person,
                        color: Colors.white,
                      ),
                      onPressed: () {
                        //you can write here navigation own
                        print('you can write here function own your');
                      }),
                  title: Text('Hello Flutter',
                      style: TextStyle(color: Colors.white, fontSize: 25)),
                  subtitle: Text(
                    '-Hi, flutter',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                )),
            Card(
                color: Colors.black54,
                elevation: 5,
                child: ListTile(
                  leading: IconButton(
                      icon: Icon(
                        Icons.person,
                        color: Colors.white,
                      ),
                      onPressed: () {
                        //you can write here navigation own
                        print('you can write here function own your');
                      }),
                  title: Text('Hello Flutter',
                      style: TextStyle(color: Colors.white, fontSize: 25)),
                  subtitle: Text(
                    '-Hi, flutter',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                )),
            Card(
                color: Colors.black54,
                elevation: 5,
                child: ListTile(
                  leading: IconButton(
                      icon: Icon(
                        Icons.person,
                        color: Colors.white,
                      ),
                      onPressed: () {
                        //you can write here navigation own
                        print('you can write here function own your');
                      }),
                  title: Text('Hello Flutter',
                      style: TextStyle(color: Colors.white, fontSize: 25)),
                  subtitle: Text(
                    '-Hi, flutter',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                )),
          ],
        ),
      ),
    );
  }
}

I'm not sure why but it throws up an error which says- No mediaquery widget ancestor found — Sahas Vivek, Apr 08 '21 at 19:35
Using MediaQuery rather than giving the values manually, we actually get the value of that phone to you. Try this code maybe fix it `final MediaQueryData mediaQuery=MediaQuery.of(context);` then try getting the attribute of this height value size.height `mediaQuery.size.height` — Fatih Kurçenli, Apr 09 '21 at 10:26

Issue with adding icons and aligning text in flutter

2 Answers2