Issue with adding icons and aligning text in flutter

  android-studio, flutter

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.

enter image description here

Source: Android Studio Questions

LEAVE A COMMENT