How to align text left inside a button, which is inside a centre widget | Flutter?

user_14290916 0
Viewed 475

my buttons are must be on center but must aligned in same line , the text in side button also should aligned left. for that i use textalign left but not works in my code , I dont know why.This is my layout screenshot.

So Can anyone modify my code so that the text inside button aligned left ,without affecting my buttons position .

Thank you

class Something extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Solve Before Downvote !'),
      ),
      body: Container(
        color: Color(0xff263238),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SingleChildScrollView(
              child: Center(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    MaterialButton(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10.0)),
                      padding: EdgeInsets.only(left: 5),
                      color: Colors.green,
                      onPressed: () {},
                      child: Text('SomeThing', textAlign: TextAlign.left),
                    ),
                    MaterialButton(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10.0)),
                      color: Colors.green,
                      onPressed: () { },
                      child: Text('Nothing', textAlign: TextAlign.left),
                    ),
                    MaterialButton(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10.0)),
                      color: Colors.green,
                      onPressed: () {},
                      child: Text('Can You do something ?',
                          textAlign: TextAlign.left),
                    ),
                    MaterialButton(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10.0)),
                      color: Colors.green,
                      onPressed: () {},
                      child: Text('Nothing to do !', textAlign: TextAlign.left),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

what i made

flutter-layout dart flutter android
2 Answers

Please check the below code. I have comment out the solution in code.

class Something extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return Scaffold(
  appBar: AppBar(
    title: const Text('Solve Before Downvote !'),
  ),
  body: Container(
    width: MediaQuery.of(context).size.width,
    color: Color(0xff263238),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        SingleChildScrollView(
          child: Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.all(2.0),
                  child: Material(
                    color: Colors.green,
                    borderRadius: BorderRadius.circular(10.0),
                    child: InkWell(
                      onTap: () {
                        setState(() {
                          abc = true;
                        });
                      },
                      child: Padding(
                        padding: const EdgeInsets.fromLTRB(0, 12, 15, 12),
                        child: Text('SomeThing', textAlign: TextAlign.left),
                      ),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(2.0),
                  child: Material(
                    color: Colors.green,
                    borderRadius: BorderRadius.circular(10.0),
                    child: InkWell(
                      onTap: () {
                        setState(() {
                          abc = true;
                        });
                      },
                      child: Padding(
                        padding: const EdgeInsets.fromLTRB(0, 12, 15, 12),
                        child: Text('Nothing', textAlign: TextAlign.left),
                      ),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(2.0),
                  child: Material(
                    color: Colors.green,
                    borderRadius: BorderRadius.circular(10.0),
                    child: InkWell(
                      onTap: () {
                        setState(() {
                          abc = true;
                        });
                      },
                      child: Padding(
                        padding: const EdgeInsets.fromLTRB(0, 12, 15, 12),
                        child: Text('Can You do something ?',
                            textAlign: TextAlign.left),
                      ),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(2.0),
                  child: Material(
                    color: Colors.green,
                    borderRadius: BorderRadius.circular(10.0),
                    child: InkWell(
                      onTap: () {
                        setState(() {
                          abc = true;
                        });
                      },
                      child: Padding(
                        padding: const EdgeInsets.fromLTRB(0, 12, 15, 12),
                        child: Text('Nothing to do !',
                            textAlign: TextAlign.left),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        )
      ],
    ),
  ),
);
  }
}
user_92021180

Can you add Align() and set alignment : Alignment.centerLeft before widget child text

user_141240990
Related