glassmorphism_widgets 0.2.2 copy "glassmorphism_widgets: ^0.2.2" to clipboard
glassmorphism_widgets: ^0.2.2 copied to clipboard

A set of widgets for use in Flutter apps. You can too easy custom and develop glass morphism widgets.

Glassmorphism Widgets #

About #

This package allows you to easily create a Glassmorphism UI.
The AppBar, ListTile, and even the BottomNavigationBar work like Material Design widgets.
The color, shape, and size of the glass are all up to you.
Create your ideal Glassmorphism App!
This package currently supports only stable channel.

Getting started #

You should add the following to the pubspec.yaml file:

dependencies:
  glassmorphism_widgets:

You should then run flutter packages get in your terminal so as to get the package.

Now import the package in the dart file:

import 'package:glassmorphism_widgets/glassmorphism_widgets.dart';

Usage #

Here is an example of how to use Glassmorphism Widgets.
Many of the parameters are based on the original Material Design widget.
If you want to know glass specific parameter.
You should look here.

GlassContainer
#

a simple glass container.

GlassContainer(
    child: Padding(
      padding: EdgeInsets.all(8),
      child: GlassText("Hello World"),
    ),
),

GlassFlexContainer
#

Container(
    height:200,
    width:200,
    GlassFlexContainer(
        child: Padding(
        padding: EdgeInsets.all(8),
        child: GlassText("Hello World"),
        ),
    ),
),

GlassApp & GlassThemeData #

If you want to change glass widgets look all together.
You should use GlassApp and GlassThemeData.

GlassApp(
  theme: GlassThemeData(
    blur: 10,
  ),
  home: MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: const MyHomePage(title: 'Flutter Demo Home Page'),
  ),
)

GlassTheme #

If you want to access GlassThemeData.
You should use GlassTheme.

GlassThemeData data = GlassTheme.of(context);

GlassText #

It is a thin white text.

GlassText("Hello World"),

GlassAppBar #

a simple glass app bar.

appBar: GlassAppBar(
    title: GlassText(
        'Glass Morphic Demo',
        fontWeight: FontWeight.bold,
        color: Colors.white,
    ),
),

GlassListTile #

a simple glass list tile

GlassListTile(
    leading: GlassIcon(Icons.search),
    title: TextField(
        decoration: InputDecoration(
        hintText: 'Search',
        border: InputBorder.none,
        hintStyle: glassTextStyle,
        ),
        style: glassTextStyle,
    ),
    onTap: () {},
),

GlassButton #

a simple glass button

GlassButton(
    onPressed: () {
    showGlassBottomSheet(
        context: context,
        child: Center(
            child: GlassText("Hello World", fontSize: 20)));
    },
    child: GlassText("Button"),
),

showGlassBottomSheet #

Display bottom sheet like glass

showGlassBottomSheet(
    context: context,
    child: Center(
        child: GlassText("Hello World", fontSize: 20)));

GlassFloatingActionButton #

floatingActionButton: GlassFloatingActionButton(
    onPressed: () {
        setState(() {
            index++;
        });
    },
    child: GlassText("$index"),
),

GlassBottomBar #

bottomNavigationBar: GlassBottomBar(
            items: [
              GlassBottomBarItem(
                icon: Icon(Icons.home),
                title: GlassText("Home"),
              ),
              GlassBottomBarItem(
                icon: Icon(Icons.search),
                title: GlassText("Search"),
              ),
              GlassBottomBarItem(
                icon: Icon(Icons.settings),
                title: GlassText("Settings"),
              ),
            ],
            onTap: (i) {
              setState(() {
                index = i;
              });
            },
            currentIndex: index,
          ),

GlassIcon #

IconButton(
    icon: GlassIcon(Icons.search),
    onPressed: () {},
),

a specific Glass widget parameter #

How to change widgets gradient? #

You should add parameter linearGradient.

How to change widgets shape? #

You should add parameter radius or borderRadius.
borderRadius takes precedence over radius.

I want to create more clear glass or more frosted glass #

You should add parameter blur.
If you set blur lower value. GlassWidgets will become clear.

Problem #

Master Channel cannot use GlassFloatingActionButton.

Contact #

If you have anything you want to inform me (@yama-yeah), such as suggestions to enhance this package or functionalities you want etc, feel free to make issues on GitHub

65
likes
140
pub points
87%
popularity

Publisher

verified publisherhiyoko.ga

A set of widgets for use in Flutter apps. You can too easy custom and develop glass morphism widgets.

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (LICENSE)

Dependencies

flutter

More

Packages that depend on glassmorphism_widgets