问题

Master Channel无法使用GlassFloatingActionButton。

关于

此包可让您轻松创建Glassmorphism UI。
AppBar、ListTile甚至BottomNavigationBar都像Material Design小部件一样工作。
玻璃的颜色、形状和大小都由您决定。
创建您理想的Glassmorphism App！
此包目前仅支持stable channel。

画廊

入门

您应该将以下内容添加到pubspec.yaml文件中

dependencies:
  glassmorphism_widgets:

然后，您应该在终端中运行flutter packages get以获取该包。

现在，在dart文件中导入该包

import 'package:glassmorphism_widgets/glassmorphism_widgets.dart';

用法

以下是如何使用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: () {},
),

如何更改小部件渐变？

您应该添加linearGradient参数。

如何更改小部件形状？

您应该添加radius或borderRadius参数。
borderRadius的优先级高于radius。

联系方式

如果您有任何想告知我的（@yama-yeah）信息，例如增强此包的建议或您想要的功能等，请随时在GitHub上创建问题
https://github.com/yama-yeah/glassmorphism_widgets/issues

GitHub

查看 Github