Question 76414 in Flutter Question posted in
The official Flutter documentation can be found here.

Display Text on right side of AppBarComponent – Flutter

So I have this AppBarComponent that displays the appbar of my app.

class AppBarComponent {
  static Widget titleWithImage(String title) {
    return Row(
      children: <Widget>[
        Image.asset(
          'logo.png',
          fit: BoxFit.contain,
          width: 40,
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10.0),
          child: Text('title'),
        ),
        Row(
          children: [
            Text(
              'subtitle',
            ),
          ],
        ),
      ],
    );
  }
}

The result is something like this:

enter image description here

But what I want is to display the subtitle on the right side of the appbar.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Oh! I have resolved it using

    Expanded(
      child: Text(
        'subtitle',
        textAlign: TextAlign.end,
      ),
    ),

    instead of wrapping it with Row.


  2. 0 
     appBar: AppBar(
          leading: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Image.network(
              "https://www.clipartmax.com/png/middle/200-2009207_francais-english-italiano-english-flag-icon-flat.png",
              fit: BoxFit.cover,
              width: 30.0,
              height: 30.0,
            ),
          ),
          title: Row(children: [
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 10.0),
              child: Text('title'),
            ),
            Row(
              children: [
                Text(
                  'subtitle',
                ),
              ],
            ),
          ]),
          flexibleSpace: Container(
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,

                  colors: <Color>[Colors.black, Colors.blue,Colors.black,]),
            ),
          ),
        ),
    Login or Signup to reply.
  3. 0

    It’s not recommended to use Widget function instead use Stateful/Stateless widgets, so you can achieve it like that…

    class AppBarComponent extends StatelessWidget {

  const AppBarComponent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      leading: const Icon(Icons.circle), //TODO replace with your logo
      title: const Text('Title'),
      actions: const <Widget>[
        Text('Subtitle'),
      ],
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search