settings_tiles 1.0.0 copy "settings_tiles: ^1.0.0" to clipboard
settings_tiles: ^1.0.0 copied to clipboard

A collection of settings tiles to easily create a settings screen

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:settings_tiles/settings_tiles.dart';

void main() {
  runApp(const MyApp());
}

/// Example app.
class MyApp extends StatefulWidget {
  /// Example app.
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool toggled = true;
  bool checked = true;
  String selectedOption = 'Option 1';
  List<String> selectedOptions = ['Option 1', 'Option 3'];
  double sliderValue = 5.0;
  Color color = Colors.blue;
  String text = 'Some text';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('settings_tiles example app'),
        ),
        body: Builder(
          builder: (context) {
            return SingleChildScrollView(
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SettingSection(
                      title: 'Section',
                      divider: null,
                      tiles: [
                        const SettingTextTile(
                          icon: Icons.abc,
                          title: 'Text',
                          description: 'This is a text tile',
                        ),
                        SettingActionTile(
                          icon: Icons.touch_app,
                          title: 'Action',
                          description: 'This is an action tile',
                          onTap: () {
                            ScaffoldMessenger.of(context).showSnackBar(
                              SnackBar(
                                content: Text('The action tile was tapped!'),
                                behavior: SnackBarBehavior.floating,
                              ),
                            );
                          },
                        ),
                        SettingSwitchTile(
                          icon: Icons.toggle_on,
                          title: 'Switch',
                          description: 'This is a switch tile',
                          toggled: toggled,
                          onChanged: (value) {
                            setState(() {
                              toggled = value;
                            });
                          },
                        ),
                        SettingCheckboxTile(
                          icon: Icons.check_box,
                          title: 'Title',
                          description: 'This is a checkbox tile',
                          checked: checked,
                          onChanged: (value) {
                            if (value == null) {
                              return;
                            }

                            setState(() {
                              checked = value;
                            });
                          },
                        ),
                        SettingSingleOptionTile(
                          icon: Icons.radio_button_on,
                          title: 'Single option',
                          description: 'This is a single option tile',
                          dialogTitle: 'Options',
                          options: const ['Option 1', 'Option 2', 'Option 3'],
                          initialOption: selectedOption,
                          onSubmitted: (value) {
                            setState(() {
                              selectedOption = value;
                            });
                          },
                        ),
                        SettingMultipleOptionsTile(
                          icon: Icons.checklist,
                          title: 'Multiple options',
                          description: 'This is a multiple options tile',
                          dialogTitle: 'Options',
                          options: const ['Option 1', 'Option 2', 'Option 3'],
                          initialOptions: selectedOptions,
                          onSubmitted: (value) {
                            setState(() {
                              selectedOptions = value;
                            });
                          },
                        ),
                        SettingTextFieldTile(
                          icon: Icons.text_fields,
                          title: 'Text field',
                          description: 'This is a text field tile',
                          dialogTitle: 'Text',
                          initialText: text,
                          onSubmitted: (value) {
                            setState(() {
                              text = value;
                            });
                          },
                        ),
                        SettingSliderTile(
                          icon: Icons.linear_scale,
                          title: 'Slider',
                          description: 'This is a slider tile',
                          dialogTitle: 'Slider',
                          min: 1.0,
                          max: 10.0,
                          divisions: 9,
                          initialValue: sliderValue,
                          onSubmitted: (value) {
                            setState(() {
                              sliderValue = value;
                            });
                          },
                        ),
                        SettingColorTile(
                          icon: Icons.color_lens,
                          title: 'Color',
                          description: 'This is a color tile',
                          dialogTitle: 'Color',
                          initialColor: color,
                          onSubmitted: (value) {
                            setState(() {
                              color = value;
                            });
                          },
                        ),
                        SettingAboutTile(
                          applicationIcon: Image.asset(
                            'assets/icon/icon.png',
                            fit: BoxFit.fitWidth,
                            height: 64,
                          ),
                          title: 'Application',
                          description: 'v1.0.0',
                        ),
                      ],
                    ),
                    SettingSection(
                      title: 'Section with dividers',
                      tiles: [
                        const SettingTextTile(
                          icon: Icons.abc,
                          title: 'Tile 1',
                          description: 'This is a text tile',
                        ),
                        SettingActionTile(
                          icon: Icons.touch_app,
                          title: 'Tile 2',
                          description: 'This is an action tile',
                          onTap: () {
                            ScaffoldMessenger.of(context).showSnackBar(
                              SnackBar(
                                content: Text('The action tile was tapped!'),
                                behavior: SnackBarBehavior.floating,
                              ),
                            );
                          },
                        ),
                        const SettingTextTile(
                          icon: Icons.abc,
                          title: 'Tile 3',
                          description: 'This is a text tile',
                        ),
                      ],
                    )
                  ],
                ),
              ),
            );
          }
        ),
      ),
    );
  }
}
4
likes
0
points
41
downloads

Publisher

verified publishermaelchiotti.dev

Weekly Downloads

A collection of settings tiles to easily create a settings screen

Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

flex_color_picker, flutter, flutter_localizations, gap

More

Packages that depend on settings_tiles