Information Technology

Guide For Integrating Flutter_widget_catalogue SDK Inside Your Flutter Application

Dhaval Baldha
01 Apr 2024
4 MINUTES READ

Quick Insights:

No time to read? Grab the key points instantly.

Summarize this article with:

ChatGPT Perplexity Google AI Mode Grok Claude

Introduction

Boost your Flutter app development with Flutter Widget Catalogue! This open-source package provides an extensive array of customizable widgets, including buttons, switches, and more. With Flutter Widget Catalogue, you can expedite your UI design process and create engaging user experiences with ease. Dive in today and discover the power of accelerated development in Flutter!

Buttons

All types of buttons are set in this package. Auth Buttons for authenticating with the most popular social networks like Google, Facebook, Apple, and to others and add more buttons like (Rounded buttons, simple buttons, border color buttons, etc....).

Switch

An easy-to-implement custom switch created for Flutter. Give it a custom height and width, colors, size, border for the switch and toggle, border radius, colors, toggle size, a set to display an 'On' and 'Off' text, and to add a custom icon inside the toggle.

Neumorphic

A complete, ready-to-use, Neumorphic UI kit for Flutter like(Buttons, switch, Container, Slider, Text, Icon, CheckBox, Toggle, Indicator, Range Slider, etc..).

Installing

1. Add dependency to pubspec.yaml

Get the latest version in the 'Installing' tab on pub.dev


    dependencies:
        flutter_widget_catalogue:

2. Import the package


    import 'package:flutter_widget_catalogue/flutter_widget_catalogue.dart';

1. Neumorphic Widgets

Screenshot

2. Buttons

How to use Buttons


    import 'package:flutter/material.dart';
    import 'package:flutter_widget_catalogue/flutter_widget_catelogue.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
        const MyApp({Key? key}) : super(key: key);
        // This widget is the root of your application.
        @override
        Widget build(BuildContext context) {
            return MaterialApp(
                title: 'Flutter Buttons',
                theme: ThemeData(
                    primarySwatch: Colors.blue,
                ),
                home: const Buttons(),
            );
        }
    }
    
    class Buttons extends StatefulWidget {
        @override
        _ButtonsPageState createState() => _ButtonsPageState();
    }
    
    class _ButtonsPageState extends State {
        @override
        Widget build(BuildContext context) {
        return Scaffold(
            body: Container(
                width: double.infinity,
                padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
                child: SingleChildScrollView(
                    child: Column(
                        children: [

Simple Buttons


    customContainer(
            child: SuccessButton(
        title: "Success Button",
        onPressed: () {},
    )),

Icon Button


    customContainer(
        child: ButttonWithIcon(
            icon: Icons.local_cafe,
            title: "Icon Button",
            color: Colors.white,
            buttonColor: Colors.cyan,
            onPressed: () {},
            ),
    ),

Floating Button


    Wrap(
        children: [
            FloatingIconButton(
                icon: Icons.home,
                onPressed: () {},
                buttonColor: Colors.orange,
            ),
            FloatingIconButton(
                icon: Icons.home,
                onPressed: () {},
                buttonColor: Colors.cyan,
                color: Colors.white,
            )
        ],
    ),

Line Button


    customContainer(
            child: PrimaryLineButton(
        onPressed: () {},
        title: "Line Button",
    )),
    customContainer(
            child: InfoLineButton(
        textColor: Colors.black,
        onPressed: () {},
        title: "Info Line Button",
    )),

Rounded Button


        customContainer(
    child: RoundedButtonWithIcon(
            onPressed: () {},
            icon: Icons.title,
            title: "Rounded Button With Icon",
            buttonColor: Colors.green,
        )),

Social Button


    Wrap(
        children: [
            FacebookButton(
                onPressed: () {},
            ),
            TwitterButton(
                onPressed: () {},
            ),
        ],
    ),
        SignInWithEmail(
            onPressed: () {},
        ),
        SignInWithGoogle(
            onPressed: () {},
        ),
        SignInWithMicrosoft(
            onPressed: () {},
        ),
        SignInWithApple(
            onPressed: () {},
        ),
    )),

Gradient Button


                                    customContainer(
                                        child: GradientButton(
                                    onPressed: () {},
                                    splashColor: Colors.orange,
                                    colors: const [
                                        Colors.red,
                                        Colors.orange,
                                    ],
                                    title: "Gradient Button",
                                )),
                            ],
                        ),
                    ),
                ),
            );
        }
    }

How to use Switch


    class MyHomePage extends StatefulWidget {
        @override
        _MyHomePageState createState() => _MyHomePageState();
    }
        
    class _MyHomePageState extends State {
        bool status = false;
        
        @override
        Widget build(BuildContext context) {
            return Scaffold(
                appBar: AppBar(
                    title: Text("Switch"),
                ),
                body: Center(
                    child: Container(
                        child: FlutterSwitch(
                            width: 125.0,
                            height: 55.0,
                            valueFontSize: 25.0,
                            toggleSize: 45.0,
                            value: status,
                            borderRadius: 30.0,
                            padding: 8.0,
                            showOnOff: true,
                            onToggle: (val) {
                                setState(() {
                                    status = val;
                                });
                            },
                        ),
                    ),
                ),
            );
        }
    }

Changelog

Please see CHANGELOG for more information on what has changed recently.

FAQ

What is the Flutter Widget Catalogue SDK?

The Flutter Widget Catalogue SDK is a comprehensive collection of visual, structural, platform-specific, UI, and interactive widgets designed to expedite app development using Flutter. It offers a variety of pre-built components such as Buttons, Switches, and Neumorphic elements to streamline the development process.

How do I integrate the Flutter Widget Catalogue SDK into my Flutter application?

Integrating the Flutter Widget Catalogue SDK into your Flutter application is straightforward. Simply add the SDK as a dependency in your project's pubspec.yaml file and import the package. From there, you can access and utilize the various widgets provided by the SDK in your application's code.

What types of buttons are available in the Flutter Widget Catalogue SDK?

The Flutter Widget Catalogue SDK offers various button types to suit various design and functionality preferences. These include Simple Buttons, IconButton, FloatingActionButton, Line Button, Rounded Button, Social Button, and Gradient Button, among others.

Can I customize the appearance of switches using the Flutter Widget Catalogue SDK?

Yes, the Flutter Widget Catalogue SDK provides customizable switches that allow you to tailor their appearance to fit your app's design aesthetic. You can adjust parameters such as height, width, colors, border radius, toggle size, and more to create switches that align with your app's visual identity.

What is Neumorphic UI, and how does the Flutter Widget Catalogue SDK incorporate it?

Neumorphic UI is a design trend characterized by soft, subtle, and tactile elements that mimic physical objects. The Flutter Widget Catalogue SDK includes a comprehensive Neumorphic UI kit that encompasses various widgets such as Buttons, Switches, Containers, Sliders, Text, Icons, Checkboxes, Toggles, and Indicators, allowing developers to create visually appealing and interactive interfaces.

Where can I find updates and changes to the Flutter Widget Catalogue SDK?

Updates and changes to the Flutter Widget Catalogue SDK are documented in the project's CHANGELOG file. You can refer to this file to stay informed about the latest features, enhancements, bug fixes, and other modifications made to the SDK over time.

Author Bio

Dhaval Baldha

Co-founder

Dhaval is the Co-founder & CTO and an AWS-Certified Cloud Architect helping startups and growing teams design scalable MVPs, SaaS platforms, and AI-driven systems. Combining strong architecture with practical execution, he works closely with businesses to build, launch, and scale reliable digital products with confidence.

Our Latest Blog

Explore real-world case studies showcasing our custom software development, AI solutions, and digital transformation services that drive measurable business growth.

Dhaval Baldha 11 Jun 2026 5 MINUTES READ

Start Your Project

Let’s discuss your project requirements and explore how our team can help you build scalable, reliable, and future-ready digital solutions.

Upload your Requirements

Upload: .jpg, .png, .pdf, .csv, .xlsx, .doc, .docx file as document

What our clients say

"Their ability to understand our needs and implement feedback promptly has made collaboration seamless and productive. Techvoot Solutions has consistently improved our communication, response time, and adherence to deadlines. They truly understand every requirement and always deliver the right solutions. A reliable partner, fully committed to quality in every aspect of their work."