简体   繁体   中英

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

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

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),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        )
      ],
    ),
  ),
);
  }
}

您可以在小部件子文本之前添加Align()并设置alignment : Alignment.centerLeft

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM