Master Channel cannot use Glass Floating Action Button

Last update: Jan 21, 2022

Problem

Master Channel cannot use GlassFloatingActionButton.

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.

Gallery

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.

GlassContainer

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"),
        ),
    ),
),

GlassText

GlassText("Hello World"),

GlassAppBar

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

GlassListTile

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

GlassButton

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

showGlassBottomSheet

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: () {},
),

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.

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 https://github.com/yama-yeah/glassmorphism_widgets/issues

GitHub

https://github.com/yama-yeah/glassmorphism_widgets
You might also like...

Bwo-master - An infinity procedural online game using Flutter and flames with NodeJS and Firebase for the back-end

Bwo-master - An infinity procedural online game using Flutter and flames with NodeJS and Firebase for the back-end

Borderless World Online (BWO) An infinity procedural online game using Flutter a

Feb 2, 2022

Swipeable button view - Create Ripple Animated Pages With Swipeable Button View

Swipeable button view - Create Ripple Animated Pages With Swipeable Button View

swipeable_button_view You can create ripple animated pages with swipeable_button

Apr 22, 2022

FFloat, although simple and easy to use, can satisfy all your imagination of the floating layer.

FFloat, although simple and easy to use, can satisfy all your imagination of the floating layer.

ffloat FFloat, although simple and easy to use, can satisfy all your imagination of the floating layer. Born and elegant, supporting precise position

May 9, 2022

dna, dart native access. A lightweight dart to native super channel plugin

dna, dart native access. A lightweight dart to native super channel plugin, You can use it to invoke any native code directly in contextual and chained dart code.

Jul 11, 2022

An open source food delivery product and service that will be developed on the FilledStacks YouTube channel

Box't Out An open source food delivery product and service that will be developed on the FilledStacks YouTube channel. The repo will contain all the s

Aug 15, 2022

The repo contains the source code for all the tutorials on the FilledStacks Youtube channel.

The repo contains the source code for all the tutorials on the FilledStacks Youtube channel.

Flutter tutorials The repo contains the source code for all the written tutorials by Filledstacks. All Tutorials plus additional snippets and shorter

Aug 16, 2022

Flutter tutorial - This is my first Flutter tutorial app. Thanks to The Net Ninja youtube channel for this wonderful tutorial

ninja_id A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Jun 9, 2022

Write iOS&Android Code using Dart. This package liberates you from redundant glue code and low performance of Flutter Channel.

Write iOS&Android Code using Dart. This package liberates you from redundant glue code and low performance of Flutter Channel.

Dart_Native Dart_Native operates as both a code generator tool and a bridge to communicate between Dart and native APIs. Replaces the low-performing F

Aug 4, 2022
Comments
  • 1. flutter 3 error

    Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.

    • 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('/C:/Src/flutter/packages/flutter/lib/src/widgets/binding.dart'). package:flutter/…/widgets/binding.dart:1 WidgetsBinding.instance?.addPostFrameCallback((_) {}

    this issue occurred when upgraded to flutter 3. can you please look into it

    Reviewed by mahadydev at 2022-05-16 20:26

Related

Floating Action Button Widget For Flutter
Floating Action Button Widget For Flutter

Flutter Tutorial - FloatingActionButton Widget (FAB) Embed the FloatingActionBut

Dec 27, 2021
A Flutter package to create a nice circular menu using a Floating Action Button.
A Flutter package to create a nice circular menu using a Floating Action Button.

FAB Circular Menu A Flutter package to create a nice circular menu using a Floating Action Button. Inspired by Mayur Kshirsagar's great FAB Microinter

Jul 27, 2022
This package will animate a floating action button at the center and icons at the bottomNavigationBar using AnimatedContainer and SlideTransition respectively.
This package will animate a floating action button at the center and icons at the bottomNavigationBar using AnimatedContainer and SlideTransition respectively.

floating_bottom_bar This package will animate a floating action button at the center and icons at the bottomNavigationBar using AnimatedContainer and

Aug 11, 2022
From then on, developers only need to master one Button component, which is enough.
From then on, developers only need to master one Button component, which is enough.

FButton From then on, developers only need to master one Button component, which is enough. Support corners, borders, icons, special effects, loading

Jul 26, 2022
Show a draggable floating chat icon button and show messages on screens
Show a draggable floating chat icon button and show messages on screens

Show a draggable floating chat icon button and show messages on screens Features A widget for displaying a chat icon (or custom widget) on top of a ba

May 5, 2022
Slider Master Animation Flutter Dart
Slider Master Animation Flutter Dart

Flutter-animated-Slider ?? ?? untitled.1.mp4 Firt you need to add this in pub yamel : dependencies: carousel_slider: ^4.0.0 Finally import 'package

Jul 1, 2022
Academic master is E-learning app where students can share their doubts wiith their peers they can chat and also they can find their notes
Academic master is E-learning app where students can share their doubts wiith their peers they can chat and also they can find their notes

Academic Master is E-learning App. Features:- 1) You can post real Post query in Images and video formates. 2) We will Provide notes,books and previou

Jun 30, 2022
Dialog flowtter-master - A Flutter implementation of DialogFlow, improved
Dialog flowtter-master - A Flutter implementation of DialogFlow, improved

A Flutter implementation of DialogFlow, improved. Build your integrations with D

Jan 3, 2022
Android test task master - Create PIN code screen, authentication by PIN code screen and menu screen
Android test task master - Create PIN code screen, authentication by PIN code screen and menu screen

Here is described test tasks for a android dev. Need to implement three screens:

Jan 9, 2022
Bwo-master - An infinity procedural online game using Flutter and flames with NodeJS and Firebase for the back-end
Bwo-master - An infinity procedural online game using Flutter and flames with NodeJS and Firebase for the back-end

Borderless World Online (BWO) An infinity procedural online game using Flutter a

Jul 18, 2022