Search code examples
flutterappbarflutter-appbar

How to add multiple text values to appbar Flutter


I am new to flutter and would like to create an app bar with 2 different text values, please see below:

enter image description here

So far, I have written the following code:

    class HomePage extends StatelessWidget {
  final double toolbarOpacity = 2.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:
      PreferredSize(
        preferredSize: Size(double.infinity, 114),
        child: AppBar(
          centerTitle: false,
          title: Text(
            'My App',
            style: TextStyle(
                color: titleTextColor,
                fontWeight: titleTextFontWeight,
                fontFamily: titleFontFamily,
                fontSize: titleFontSize),
          ),
           backgroundColor: Color.fromRGBO(232, 232, 242, 1),
        ),
      ),
    );
  }
}

Which has given me the following results:

enter image description here

Could somebody please either direct me to material or help me to achieve my desired output?

Thanks in advance.


Solution

  • As title accepts widget u can use column widget in it like this

    AppBar(
              centerTitle: false,
              title: Column(
                children: <Widget>[
                    Text(
                    'My App',
                    style: TextStyle(
                        color: titleTextColor,
                        fontWeight: titleTextFontWeight,
                        fontFamily: titleFontFamily,
                        fontSize: titleFontSize),
                  ),
                  Text("My second text"),
                ]
               )
               backgroundColor: Color.fromRGBO(232, 232, 242, 1),
            ),
    

    u can use PreferredSize to defined size

    appBar:
          PreferredSize(
            preferredSize: Size(double.infinity, 114),
            child: AppBar(
              centerTitle: false,
              title: Column(
                children: <Widget>[
                    Text(
                    'My App',
                    style: TextStyle(
                        color: titleTextColor,
                        fontWeight: titleTextFontWeight,
                        fontFamily: titleFontFamily,
                        fontSize: titleFontSize),
                  ),
                  Text("My second text"),
                ]
               )
               backgroundColor: Color.fromRGBO(232, 232, 242, 1),
            ),
          ),