Skip to content

Double ListTile Buttons

FrenkyDema edited this page Aug 29, 2024 · 1 revision

The Double ListTile Buttons widget is designed to display two ListTileButton widgets side by side. It provides an easy way to create a dual-action button layout, where each button can have its own content, styling, and behavior. This widget is particularly useful in settings, forms, or any other scenarios where two related actions need to be presented together.


Constructor

DoubleListTileButtons({
  Key? key,
  required ListTileButton firstButton,
  required ListTileButton secondButton,
  EdgeInsetsGeometry padding = EdgeInsets.zero,
  bool expanded = true,
  double? space,
})

Properties

Property Type Description
firstButton ListTileButton The first ListTileButton displayed in the layout.
secondButton ListTileButton The second ListTileButton displayed in the layout.
padding EdgeInsetsGeometry The padding around the entire widget. Defaults to EdgeInsets.zero.
expanded bool If true, the buttons will expand to fill the available width. If false, they will maintain their intrinsic size. Defaults to true.
space double? The space between the two buttons. If null, a default spacing will be used.

Usage Example

Here’s a basic example of how to use the Double ListTile Buttons in your Flutter app:

DoubleListTileButtons(
  firstButton: ListTileButton(
    body: Text('Button 1'),
    onPressed: () {
      print('Button 1 pressed');
    },
  ),
  secondButton: ListTileButton(
    body: Text('Button 2'),
    onPressed: () {
      print('Button 2 pressed');
    },
  ),
  padding: EdgeInsets.all(8.0),
  space: 16.0,
);

Example with Non-Expanded Buttons

DoubleListTileButtons(
  firstButton: ListTileButton(
    body: Text('Action A'),
    onPressed: () {
      print('Action A pressed');
    },
  ),
  secondButton: ListTileButton(
    body: Text('Action B'),
    onPressed: () {
      print('Action B pressed');
    },
  ),
  expanded: false,
  space: 10.0,
  padding: EdgeInsets.symmetric(horizontal: 16.0),
);

Customization Tips

  • Button Content: Each ListTileButton can have its own content, including leading icons, titles, subtitles, and trailing widgets. Customize each button to fit the specific actions you want to present.
  • Spacing: Adjust the space property to control the distance between the two buttons. This is particularly useful for maintaining consistent spacing in your layout.
  • Padding: Use the padding property to control the space around the entire widget, ensuring it fits well within your overall layout.
  • Expansion: The expanded property allows you to choose whether the buttons should stretch to fill the available space or maintain their intrinsic width. This gives you flexibility in how the buttons are displayed.

Common Use Cases

  • Settings Menus: Use the Double ListTile Buttons to create a dual-action layout in settings menus, where each button represents a different configuration option.
  • Forms: Present "Accept" and "Decline" options side by side in forms or confirmation dialogs.
  • Action Panels: Use this widget to present related actions together, such as "Save" and "Cancel" buttons in a toolbar or dialog.