玻璃態效果元件

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