play_kit

PLAY_KIT package containing widgets to implement glass morphism in flutter apps. You can controll Glass effect blur radius , height , blur color etc. This package contains a set of Material Widgets that make it easy to Glass UI design. It's multi-platform, and supports mobile, desktop, and the browser.

Features

• PlayContainer provide a Glass Container
• PlayTitle provide a Glass Text
• PlayDivider provide a Glass Divider

Getting started

1. Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
  play_kit: ^0.0.1

2. Install it

You can install packages from the command line:

with pub:

$ pub get play_kit

with Flutter:

$ flutter pub get play_kit

3. Import it

Now in your Dart code, you can use:

import 'package:play_kit/play_kit.dart';

Using

PlayContainer provide a Glass Container:

  PlayContainer(
                height: 200,
                width: 200,
                dark: true,
                  child: PlayTitle(
                    title: 'PLAY_KIT',
                    fontSize: 30,
                    dark: true,
                    fontWeight: FontWeight.w900),
                ),
                       

PlayTitle provide a Glass Text:

  PlayTitle(title: 'PLAY_KIT', dark: true),

PlayDivider provide a Glass Divider:

  PlayDivider(height: 20, dark: true),

PlayMaterial StatelessWidget Glass UI. Include it in your build method like:

class PlayMaterial extends StatelessWidget {
  const PlayMaterial({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Stack(children: [
          Image.network(
            'https://flutter.dev/assets/images/homepage/carousel/slide_1-bg.jpg',
            fit: BoxFit.cover,
            height: 800,
          ),
          Image.network(
            'https://flutter.dev/assets/images/homepage/carousel/phone_bezel.png',
            fit: BoxFit.cover,
            height: 700,
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: const [
              PlayContainer(
                height: 200,
                width: 200,
                dark: true,
                borderRadius: BorderRadius.all(Radius.circular(10)),
                child: Center(
                  child: PlayTitle(
                    title: 'PLAY_KIT',
                    fontSize: 30,
                    dark: true,
                    fontWeight: FontWeight.w900,
                  ),
                ),
              ),
              PlayDivider(
                height: 20,
                dark: true,
              ),
              PlayTitle(
                title: 'PLAY_KIT',
                fontSize: 50,
                dark: true,
                fontWeight: FontWeight.w900,
              ),
            ],
          )
        ]),
      ),
    );
  }
}

Note: You might come up with an issue that the play_kit does not get updated. The solution to this, to open an issue.

Bugs or Requests

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on GitHub and I'll look into it. Pull request are also welcome.

This project follows the all-contributors specification. Contributions of any kind are welcome!

Libraries

play_kit