glassmorphism_widgets

Description:

glassmorphism 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:
copied to clipboard
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';
copied to clipboard
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"),
),
),
copied to clipboard
GlassFlexContainer #
Container(
height:200,
width:200,
GlassFlexContainer(
child: Padding(
padding: EdgeInsets.all(8),
child: GlassText("Hello World"),
),
),
),
copied to clipboard
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'),
),
)
copied to clipboard
GlassTheme #
If you want to access GlassThemeData.
You should use GlassTheme.
GlassThemeData data = GlassTheme.of(context);
copied to clipboard
GlassText #
It is a thin white text.
GlassText("Hello World"),
copied to clipboard
GlassAppBar #
a simple glass app bar.
appBar: GlassAppBar(
title: GlassText(
'Glass Morphic Demo',
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
copied to clipboard
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: () {},
),
copied to clipboard
GlassButton #
a simple glass button
GlassButton(
onPressed: () {
showGlassBottomSheet(
context: context,
child: Center(
child: GlassText("Hello World", fontSize: 20)));
},
child: GlassText("Button"),
),
copied to clipboard
showGlassBottomSheet #
Display bottom sheet like glass
showGlassBottomSheet(
context: context,
child: Center(
child: GlassText("Hello World", fontSize: 20)));
copied to clipboard
GlassFloatingActionButton #
floatingActionButton: GlassFloatingActionButton(
onPressed: () {
setState(() {
index++;
});
},
child: GlassText("$index"),
),
copied to clipboard
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,
),
copied to clipboard
GlassIcon #
IconButton(
icon: GlassIcon(Icons.search),
onPressed: () {},
),
copied to clipboard
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