How to use Responsive Layout Library to create button bars

Learn how to create beautiful and responsive button bars using Responsive Layout Library. In this tutorial, we’ll show you how to use Responsive Layout Library to create button with no scripting at all. We’ll cover everything from setting up your project to creating your first button bar. So whether you’re a seasoned developer or just getting started, this tutorial is for you!

Create a Stack and other controls for your button bar

  1. Create your stack or use an existing one
  2. Create the buttons you want to convert to a button bar

Select the buttons you want to turn into a bar and group them

  1. Select the controls to use as components of your button bar
  2. Group them together

Open Magic Palette

Select your group and configure Responsive Layout

  1. Select the previously created group.
  2. On the 'Content' section of Magic Palette select type as 'row', this will order the controls inside the group as a single row.
  3. The MainAxisAlignment acts on the x axis of the row making it possible to have different control distributions, for this example we are using spaceEvenly to make the buttons distribute evenly across the width of the group. Feel free to try out the other four options to achieve different results.
  4. CrossAxisAlignment defines how to position controls on the y axis of the group, in this case we selected 'center' to keep the buttons vertically centered.
  5. HorizontalDirection defines if the controls will be ordered starting from left or right.