Search code examples
iosflutterflutter-layoutappbar

Flutter AppBar Leading Text


I want to make in my AppBar leading: Icon(Icons.settings) to ==> Text('Settings'),

When I make just leading: Text('Cancel', style: TextStyle(fontSize: 20)),

enter image description here


and need to be like this down

Image

basically I want to make to leading be Text not icon, is this possible?


Solution

  • Generally you can put in the leading param of AppBar constructor any widget you want to. If you want to swap Icon(Icons.settings) for Text('Settings') just do so! If 'Settings' text has broken into two parts adjust it by setting proper value of leadingWidth.

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
            title: 'Flutter Demo',
            theme: new ThemeData(
                primarySwatch: Colors.orange,
                accentColor: Colors.blue,
                textTheme: TextTheme(title: TextStyle(color: Colors.white))),
            home: Scaffold(
                appBar: AppBar(
              leadingWidth: 75, //TODO Adjust leading container width
              leading: Center(
                  child: Text(
                'Settings',
                style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
              )),
            )));
      }
    }
    

    I added Center widget and TextStyle for better experience. enter image description here