Examples

Overview

This page provides quick examples of how to use the most common widgets in the Risto Widgets library. These examples are simple, ready-to-use snippets that you can copy and paste into your Flutter projects.

---

Custom Action Button

The Custom Action Button is a versatile button that can be customized to fit various UI needs.

CustomActionButton(
  onPressed: () {
    print('Button Pressed');
  },
  backgroundColor: Colors.blue,
  child: Text('Click Me'),
);

ListTile Button

The ListTile Button allows you to create a button with leading and trailing icons, along with a body and subtitle.

ListTileButton(
  body: Text('This is a ListTile Button'),
  onPressed: () {
    print('ListTile Button Pressed');
  },
  leading: Icon(Icons.info),
  trailing: Icon(Icons.arrow_forward),
);

Increment/Decrement Widget

The Increment/Decrement Widget is perfect for scenarios where users need to adjust quantities or values.

IncrementDecrementWidget(
  quantity: 1,
  maxQuantity: 10,
  minValue: 0,
  onIncrement: () {
    print('Incremented');
  },
  onDecrement: () {
    print('Decremented');
  },
);

Expandable ListTile Button

The Expandable ListTile Button is a button that expands to reveal additional content.

ExpandableListTileButton(
  controller: ExpandableController(),
  expanded: Text('Expanded Content'),
  buttonBody: Text('Click to Expand'),
  buttonLeading: Icon(Icons.expand_more),
);

Open Custom Sheet

The Open Custom Sheet provides a customizable bottom sheet that you can use to display additional options or content.

OpenCustomSheet(
  content: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Text('This is a custom sheet'),
      ElevatedButton(onPressed: () {}, child: Text('Action')),
    ],
  ),
  backgroundColor: Colors.white,
  isDismissible: true,
  enableDrag: true,
);

Double ListTile Buttons

The Double ListTile Buttons widget is used to display two ListTileButton widgets side by side.

DoubleListTileButtons(
  firstButton: ListTileButton(
    body: Text('Button 1'),
    onPressed: () {
      print('Button 1 Pressed');
    },
  ),
  secondButton: ListTileButton(
    body: Text('Button 2'),
    onPressed: () {
      print('Button 2 Pressed');
    },
  ),
  space: 10.0,
);

Rounded Container

The Rounded Container is a flexible container with rounded corners, perfect for wrapping content.

RoundedContainer(
  borderColor: Colors.green,
  backgroundColor: Colors.lightGreen[100],
  borderRadius: 20.0,
  padding: EdgeInsets.all(16.0),
  child: Text('This is a rounded container'),
);

---

How to Use These Examples

1. Copy and Paste: Simply copy the code snippets provided in each example and paste them into your Dart files.
2. Customize: Adjust the properties as needed to fit your specific use case and design requirements.
3. Run Your App: Build and run your Flutter app to see the widgets in action.

For more detailed explanations and customization options, refer to the specific widget pages in this documentation.