Flutter Button With Left Align Text and Icon

flutter button left text

Developing a flutter UI is very difficult for a beginner or I think any other technology it’s very intimidating for a starter. I remember my first time trying to make a button in Flutter that had left aligned text in it. I spent a lot of time on how to make it but never made it.

Once you are getting familiar with flutter widget or component blocks, you can apply whatever style you want for your app. In html you can just do something like <button style=”text-align:left”>Text</button> but in flutter it is a bit tricky.

So here I provide an example on how you can align text inside a flutter button to the left.

Flutter button with left align text

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  Widget button(){
    return RaisedButton(
        onPressed: () => {
        },
        // padding: const EdgeInsets.all(0.0),
        child: Container(
          padding: const EdgeInsets.only(top: 20.0, bottom: 20 ),
          child:Row(
            children: [
              Align(
                  alignment: Alignment.centerLeft,
                  child: Icon(Icons.play_circle_fill)
              ),
              Container(
                  margin: const EdgeInsets.only( left: 10.0 ),
                  child: Text(
                    "Left Align Button",
                    style: TextStyle( fontSize: 20.0),
                  )
              )
            ],
          ),
        ),
        shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(5.0)
        )
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        margin: EdgeInsets.all(20) ,
        child: Container(
          child: Column(
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Container(
                  margin: const EdgeInsets.all( 20 ),
                  child: RaisedButton(
                    onPressed: () {},
                    child: Container(
                      padding: const EdgeInsets.only(top: 20.0, bottom: 20 ),
                      child: const Text('First Centered Button', style: TextStyle(fontSize: 20)),
                    ),
                  ),
                ),
                button()
              ]
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

I have been working on some mobile app projects, flutter promises a lot of robustness, but i’ve seen so far i am never actually like it. I still love developing android apps using Java and React Native. Maybe it’s because I am not exploring or not experiencing enough flutter, maybe it’s actually good if you are very fluent writing dart code.

Still dart is a new language, very little information about it and I still don’t have a strong reason to learn it.