Free Consultation

Information Technology

Guide For Integrating Flutter_widget_catalogue SDK Inside Your Flutter Application

Dhaval Baldha

01 Apr 2024

4 MINUTES READ

Guide For Integrating Flutter_widget_catalogue  SDK Inside Your Flutter Application

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

Share:


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

// We are here to help you

Trusting in Our Expertise

  • 1 Week Risk Free Trial.
  • Direct Communication With Developer.
  • On-time Project Delivery Assurity.
  • Get Daily Update & Weekly Live Demo.
  • Assign Dedicated PM.
  • Sign NDA for Security & Confidentiality.

Collaborate with Techvoot Solutions

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