neobrutalist_ui_elements 1.0.5

neobrutalist_ui_elements: ^1.0.5 copied to clipboard

This is a flutter package that aims to create beautiful, customizable and reusable UI elements that use "Neo Brutalistic" design language. It contains easy to use elements for developing beautiful UI pages.

Features #

• NeoContainer - Main container element with customizable animations, shapes, and shadow effects
• NeoInputField - Input field with controller support and customizable styling
• NeoTextContainer - Text container with Neo Brutalistic shadow
• NeoCircleIconButton - Circular icon button with press animations
• NeoSwitch - Toggle switch with customizable colors and animations
• NeoSegmentedOptions - Segmented control for multiple options
• NeoDialog - Neobrutalist-style dialog with customizable content and buttons
• NeoToast - Toast notification component with slide and fade animations
• NeoWindow - Windows 95-style window component with title bar
• NeoSlider - Slider with customizable track colors, thumb size, and value indicator
• NeoLoadingIndicator - Loading indicator with customizable size, color, and animation duration

Usage #

NeoContainer(
    offset: 3,
    animate: true,
    padding: const EdgeInsets.all(16),
    bgcolor: const Color(0xFFFFD93D),
    borderRadius: 8,
    onPressed: () {
        _showSnackBar('ContainerNeo pressed!');
        },
        child: const Text(
        'Clickable Neo Container',
        style:
        TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        ),
),

const NeoInputField(
                    hintText: 'Password',
                    width: 300,
                    obscureText: true,
                    bgcolor: Color(0xFFB0E0E6),
                    textStyle: TextStyle(color: Colors.black),
                  ),

NeoTextContainer(
    textWidget: Text(
        'Shadowy Text Container',
        style:
        TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
    width: 250,
    bgcolor: Color(0xFF3AC1FF),
),

NeoCircleIconButton(
    padding: const EdgeInsets.all(12),
    icon: const Icon(Icons.favorite,
        size: 40, color: Colors.black),
    backgroundColor: const Color(0xFFFF6B6B),
    offset: 3,
    onPressed: () {
        _showSnackBar("Favorite button pressed!");
        },
),

NeoSwitch(
    onChanged: (value, context) {
            setState(() {
                _switchValue = value;
                });
                _showSnackBar('$_switchValue');
            },
    defaultState: _switchValue,
    width: 110,
    height: 50,
    falseColor: Colors.grey,
    trueColor: const Color(0xFFFFA6F6),
    borderRadius: BorderRadius.circular(30),
    optionalShadowOffset: 4,
    animationDuration: const Duration(milliseconds: 180),
),

NeoSegmentedOptions(
    onOptionSelected: (index, context) {
        setState(() {
            _selectedSegment = index;
            });
    },
    width: 100,
    height: 50,
    borderThickness: 2,
    numberOfOptions: 3,
    selectedOption: _selectedSegment,
    activeColor: const Color(0xFFA8A6FF),
    optionWidgets: const [
        Text('Option 1',
            style: TextStyle(fontWeight: FontWeight.bold)),
        Text('Option 2',
            style: TextStyle(fontWeight: FontWeight.bold)),
        Text('Option 3',
            style: TextStyle(fontWeight: FontWeight.bold)),
    ],
),

NeoSlider(
    value: _sliderValue2,
    onChanged: (value) {
        setState(() {
            _sliderValue2 = value;
        });
    },
    min: 0.0,
    max: 100.0,
    trackColor: const Color(0xFFE0E0E0),
    activeTrackColor: const Color(0xFFFF6B6B),
    thumbColor: Colors.white,
    thumbInnerColor: const Color(0xFFFF6B6B),
    height: 20.0,
    thumbSize: 40.0,
    shadowOffset: 3.0,
    showValueIndicator: true,
),

NeoLoadingIndicator(
    size: 64.0,
    color: Color(0xFFFF6B6B),
    duration: Duration(milliseconds: 500),
),

NeoDialog(
    title: const Text(
        'NEO DIALOG',
        style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    ),
    content: const Text(
        'This is a neobrutalist dialog example!',
        style: TextStyle(fontSize: 18),
        textAlign: TextAlign.center,
    ),
    backgroundColor: const Color(0xFFFF6B6B),
    buttons: (You can add a row of buttons here!
    ),
)

void _showToast() {
ToastNeoService.show(
    backgroundColor: Colors.limeAccent,
    hasButton: true,
    buttonMessage: 'View',
    icon: Icons.info,
    height: 70,
    borderRadius: 10,
    borderThickness: 2,
    borderChin: 4,
    shadowColor: Colors.black,
    context,
    'This is a toast!',
    );
  }

NeoWindow95(
    title: 'Neobrutalist Window',
    titleBarColor: const Color(0xFF3AC1FF),
    width: 400,
    onClose: () {
        _showSnackBar('Window closed!');
    },
    child: const Padding(
    padding: EdgeInsets.all(16),
        child: Text(
            'This is a neobrutalist window component!',
            style: TextStyle(fontSize: 16),
        ),
    ),
),

Additional information #

This package is published on pub.dev!