Guide For Integrating Flutter_widget_catalogue SDK Inside Your Flutter Application

Guide For Integrating Flutter_widget_catalogue  SDK Inside Your Flutter Application

Dhaval Baldha

01 Apr 2024

4 MINUTES READ

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!

Flutter widget catalogue

Create awesome apps very fast with Flutter's collection of visual, structural, platform, UI, and interactive widgets. It's an open-source package.

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: <latest-version>
        

2. Import the package


    import 'package:flutter_widget_catalogue/flutter_widget_catalogue.dart'; 
    

1. Neumorphic Widgets

Screenshot
Neumorphic Widgets screenshort1
Neumorphic Widgets screenshort2

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<Buttons> {
        @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: <Widget>[
            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<MyHomePage> {
        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

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.

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.

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.

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.

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.

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.

Dhaval Baldha
Dhaval Baldha

Co-founder

Dhaval is a visionary leader driving technological innovation and excellence. With a keen strategic mindset and deep industry expertise, he propels the company towards new heights. His leadership and passion for technology make him a cornerstone of Techvoot Solutions' success.

Linkedin
Hire Skilled Developer

*Please fill all the required fields

Get our Newsletter

Customized solutions for your projects

*Please fill all the required fields