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

How to add spotify kind of buttons on the appbar in flutter?

I am building a Spotify clone in flutter and want to achieve the look of the buttons on the appbar(All, Music, Podcasts) they change colors like in tabbar function but I am not sure if this particular thing can be achieved with tab bar.Example image of Spotify Ui <= providing the image here, just take a look at the appbar at those buttons or tabs to be precise.

I have tried using tabbar under appbar but couldn’t quite get that.

Tags:

2

Answers


  1. 0

    You can create the buttons you will use in a Row with a for loop. Then you can display the widget you will display at the bottom using PageViewBuilder. With the clicks of the buttons above, you change the index of the widgets in PageViewBuilder. In this way, the buttons will be as you want.

    Login or Signup to reply.
  2. 0

    Instead of TabBar, use a custom AppBar widget.
    Inside the AppBar’s preferredSize property, define a Size with your desired app bar height.
    Within the AppBar’s child, use a Row widget to horizontally arrange the buttons.
    Create individual TextButton widgets for "All," "Music," and "Podcasts."
    Style the TextButtons with appropriate colors (use onPressed callback to change color on press).
    Consider using a Container with rounded corners around each TextButton to mimic the Spotify button style.

    AppBar(
  preferredSize: Size.fromHeight(56.0), // Set your desired height
  backgroundColor: Colors.black,
  title: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      TextButton(
        onPressed: () => // Handle button press
        ,
        child: Text(
          "All",
          style: TextStyle(color: Colors.white),
        ),
      ),
      TextButton(
        onPressed: () => // Handle button press
        ,
        child: Text(
          "Music",
          style: TextStyle(color: Colors.white),
        ),
      ),
      TextButton(
        onPressed: () => // Handle button press
        ,
        child: Text(
          "Podcasts",
          style: TextStyle(color: Colors.white),
        ),
      ),
    ],
  ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search