basf_flutter_components

Generated by the Very Good CLI 🤖

A BASF Flutter components library for Flutter

Installing

Add BASF Flutter Components to your pubspec.yaml file:

dependencies:
  basf_flutter_components:

Import the library into your .dart file:

import 'package:basf_flutter_components/basf_flutter_components.dart';

Use your IDE IntelliSense to import any of the Components built into the library

• Theme
• Widgets
• Animations
• Extensions

---

BASF Flutter Components

• Theme

Themes

theme: BasfThemes.lightMainTheme(BasfThemeType.darkBlue),
/// etc...

Colors

BasfColors.red,
/// etc...

Fonts

Theme.of(context).textTheme.headline1!,
                         // headline2
                         // headline3
                         // headline4
                         // headline5
                         // headline6
                         // bodyText1
                         // bodyText2
                         // subtitle1
                         // subtitle2
                         // caption
                         // button
                         // overline

---

• Widgets

AppSnackBar

AppSnackBar.info(message: 'Button pressed').show(context);
// or
AppSnackBar.error(message: 'Button pressed').show(context);

BasfTextButton

BasfTextButton.contained(
        text: 'Styled Button',
        onPressed: () => _onPressed(context),
        style: TextButton.styleFrom(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0)),
          backgroundColor: BasfColors.red,
        ),
      ),
// or
BasfTextButton.transparent(
      context: context,
      text: 'Expanded Button',
      expanded: true,
      onPressed: () => _onPressed(context),
),
// or
BasfTextButton.hint(
      context: context,
      text: 'Hint Button',
      onPressed: () => _onPressed(context),
),

OutlinedButton

BasfOutlinedButton(
              text: 'Outlined Buttons',
              onPressed: () { /* --- */ },
            );

TransparentButton

BasfTextButton.transparent(
    context: context,
    text: 'Only Text',
    onPressed: () => _onPressed(context),
),

SliderButton

SliderButton(
    text: 'Basf Slider button',
    onConfirmation: () {},
),

Dialogs

BasfTextButton.contained(
    text: 'Text',
    onPressed: () {
    showDialog<void>(
            context: context,
            builder: (context) {
    	    return const BasfAlertDialog(
        	title: 'Title',
            	description: 'Body Text',
            	confirmText: 'Confirm Text',
            	dismissText: 'Dismiss Text',
                //onlyConfirm: true, // Optional to hide red text
            );
        },
    );
    },
);

Text fields

BasfTextField(
    decoration: const InputDecoration(
        hintText: 'Enabled',
    ),
    controller: _enabledController,
),

Dropdown

BasfDropDownInput(
    controller: TextEditingController(),
    values: const ['Option1', 'Option2', 'Option3'],
),

Radio

RadioOptions(
    title: 'BASF Radio',
    selectedValue: selectedValue,
    labelGenerator: (o) => '$o',
    values: values,
    onSelected: (value) {
      setState(() => selectedValue = value.toString());
    },
),

CheckBox

BasfCheckbox(
	value: selected, // Update this
	onChanged: change,
    // reverse: true, Optional
),

Icons

Icon(BasfIcons.add),
// or
Icon(BasfIconsData(code /* e842 */)),

---

• Animations

Fade

Fade(
    visible: value, // Update this value
    child: Text('Sup'),
);

---

• Extensions

ThemeData on BuildContext

This extensions allows us to access a themedata based on the current context

final theme = context.theme; // Current ThemeData

Joined Widgets

This extension allows us to add a separator between each element of a List Usage: joinWithSeparator

[
 const Text('CARLOS'),
 const Text('MOBILE SOLUTIONS'),
].joinWithSeparator(); // You can also specify your own separator Widget
//.joinWithSeparator(const SizedBox(height: 10));

Spaced Widgets

This extension allows us to add a padding to a whole List, by default excludes flex Widgets, such as Expanded, Spacer or Flexible Usage: spaced

[
  const Text('CARLOS'),
  const Text('MOBILE SOLUTIONS'),
].spaced(); // You can also specify your own EdgeInsetsGeometry
//.spaced(padding: const EdgeInsets.all(10));

Log on Object

This extensions emits a log event of the current object, and returns the length of the output log Usage: log

final testString = 'My String';
testString.log();
// Outputs -> 'My String' as a log event

Detailed Where on Map<K, V>

This set of extensions allows us to find an entry based on key, value, or both Usage: where, whereKey and whereValue

<String, int>{'John': 20, 'Mary': 21, 'Peter': 20}

..where((key, value) => key.length > 4 && value >= 20) // {Peter: 22}

..whereKey((key) => key.length < 5) // {John: 20, Mary: 21}

..whereValue((value) => value.isEven); // {John: 20, Peter: 22}

Capitalization on String

This extensions allows us to safely capitalize or title-case a String Usage: toCapitalized and toTitleCase

'carlos g'.toCapitalized(); // Carlos g
'carlos g'.toTitleCase(); // Carlos G

You can find how to use all of this components at the example project