glassmorphism 3.0.0 copy "glassmorphism: ^3.0.0" to clipboard
glassmorphism: ^3.0.0 copied to clipboard

A Flutter package for implimentation of Glassmorphic UI easily.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:glassmorphism/glassmorphism.dart';
import 'dart:ui';
import 'package:http/http.dart' as http;
import 'package:html/parser.dart';

late String likes, gotpoints, popularity, totalPoints, details, pac, date;

void main() async {
  await maintest();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GlassMorphic Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: double.infinity,
          width: double.infinity,
          decoration: BoxDecoration(
            image: DecorationImage(
                image: Image.asset("assets/bg.png").image, fit: BoxFit.cover),
          ),
          child: SafeArea(
            child: GlassmorphicContainer(
              width: MediaQuery.of(context).size.width * 0.9,
              height: MediaQuery.of(context).size.height * 0.9,
              borderRadius: 0,
              blur: 7,
              alignment: Alignment.bottomCenter,
              border: 0,
              linearGradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    Color(0xFFF75035).withAlpha(55),
                    Color(0xFFffffff).withAlpha(45),
                  ],
                  stops: [
                    0.3,
                    1,
                  ]),
              borderGradient: LinearGradient(
                  begin: Alignment.bottomRight,
                  end: Alignment.topLeft,
                  colors: [
                    Color(0xFF4579C5).withAlpha(100),
                    Color(0xFFFFFFF).withAlpha(55),
                    Color(0xFFF75035).withAlpha(10),
                  ],
                  stops: [
                    0.06,
                    0.95,
                    1
                  ]),
              child: Column(
                children: [
                  Expanded(
                    child: Stack(
                      children: [
                        Positioned(
                          bottom: MediaQuery.of(context).size.height * 0.3 - 70,
                          left: 40,
                          child: Container(
                            width: 100,
                            height: 100.0,
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              gradient: LinearGradient(colors: [
                                Color(0xFFBC1642),
                                Color(0xFFCB5AC6),
                              ]),
                            ),
                          ),
                        ),
                        Positioned(
                          bottom: 50,
                          left: 30,
                          child: Container(
                            width: 80,
                            height: 40,
                            decoration: BoxDecoration(
                              shape: BoxShape.rectangle,
                              gradient: LinearGradient(colors: [
                                Color(0xFFFDFC47),
                                Color(0xFF24FE41),
                              ]),
                            ),
                          ),
                        ),
                        Column(
                          children: [
                            glassCard(context),
                            GlassmorphicContainer(
                              width:
                                  MediaQuery.of(context).size.width * 0.9 - 20,
                              height:
                                  MediaQuery.of(context).size.height * 0.4 - 20,
                              borderRadius: 35,
                              margin: EdgeInsets.all(10),
                              blur: 10,
                              alignment: Alignment.bottomCenter,
                              border: 2,
                              linearGradient: LinearGradient(
                                  begin: Alignment.topLeft,
                                  end: Alignment.bottomRight,
                                  colors: [
                                    Color(0xFFFFFFF).withAlpha(0),
                                    Color(0xFFFFFFF).withAlpha(0),
                                  ],
                                  stops: [
                                    0.3,
                                    1,
                                  ]),
                              borderGradient: LinearGradient(
                                  begin: Alignment.topLeft,
                                  end: Alignment.bottomRight,
                                  colors: [
                                    Color(0xFFFFFFF).withAlpha(01),
                                    Color(0xFFFFFFF).withAlpha(100),
                                    Color(0xFFFFFFF).withAlpha(01),
                                  ],
                                  stops: [
                                    0.2,
                                    0.9,
                                    1,
                                  ]),
                              child: Body2(),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

// ignore: non_constant_identifier_names
Widget glassCard(var context) {
  double textScaleFactor = MediaQuery.textScaleFactorOf(context);
  return GlassmorphicFlexContainer(
      flex: 2,
      borderRadius: 35,
      padding: EdgeInsets.all(25),
      blur: 14,
      alignment: Alignment.bottomCenter,
      border: 2,
      linearGradient: LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [
          Color(0xFF0FFFF).withOpacity(0.2),
          Color(0xFF0FFFF).withOpacity(0.2),
        ],
      ),
      borderGradient: LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [
          Color(0xFF0FFFF).withOpacity(1),
          Color(0xFFFFFFF),
          Color(0xFF0FFFF).withOpacity(1),
        ],
      ),
      child: Column(
        key: UniqueKey(),
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Expanded(
            flex: 2,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                SizedBox(height: MediaQuery.of(context).size.height * 0.003),
                Image.network(
                  "https://pub.dev/static/img/pub-dev-logo-2x.png?hash=umitaheu8hl7gd3mineshk2koqfngugi",
                  scale: 1.7,
                ),
                SizedBox(height: MediaQuery.of(context).size.height * 0.003),
                InkWell(
                  onTap: () {
                    // launchPubDev();
                  },
                  child: Text(
                    pac,
                    style: TextStyle(
                      fontFamily: 'RobotoMono',
                      fontSize: 24.0 / textScaleFactor,
                      color: Colors.white,
                      fontWeight: FontWeight.w900,
                    ),
                  ),
                ),
                Text(
                  "Published on $date",
                  style: TextStyle(
                    fontFamily: 'RobotoMono',
                    fontSize: 16.0 / textScaleFactor,
                    fontStyle: FontStyle.italic,
                    color: Colors.white,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                Text(
                  "Published by Ritick Saha\n(The Flutter Foundry)",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontFamily: 'RobotoMono',
                    fontStyle: FontStyle.italic,
                    fontSize: 16.0 / textScaleFactor,
                    color: Colors.white,
                    fontWeight: FontWeight.w300,
                  ),
                ),
                SizedBox(height: MediaQuery.of(context).size.height * 0.001),
                Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Image.asset(
                    "assets/logo.png",
                    height: 30,
                  ),
                ),
              ],
            ),
          ),
          Flexible(
            flex: 1,
            fit: FlexFit.tight,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                RichText(
                  text: TextSpan(
                    text:
                        '${int.parse(likes) > 1000 ? int.parse(likes).toStringAsExponential() : int.parse(likes)}',
                    style: TextStyle(
                      fontFamily: 'RobotoMono',
                      fontSize: 26.0 / textScaleFactor,
                      color: Colors.white,
                      fontWeight: FontWeight.w900,
                    ),
                    children: <TextSpan>[
                      TextSpan(
                        text: '\nLikes',
                        style: TextStyle(
                          fontFamily: 'RobotoMono',
                          fontSize: 15.0 / textScaleFactor,
                          color: Colors.white60,
                          fontWeight: FontWeight.w500,
                        ),
                      )
                    ],
                  ),
                  textAlign: TextAlign.center,
                ),
                RichText(
                  textAlign: TextAlign.center,
                  text: TextSpan(
                    text: '$gotpoints',
                    style: TextStyle(
                      fontFamily: 'RobotoMono',
                      fontSize: 26.0 / textScaleFactor,
                      color: Colors.white,
                      fontWeight: FontWeight.w900,
                    ),
                    children: <TextSpan>[
                      TextSpan(
                        text: '/$totalPoints',
                        style: TextStyle(
                          fontFamily: 'RobotoMono',
                          fontSize: 15.0 / textScaleFactor,
                          color: Colors.white,
                          fontWeight: FontWeight.w900,
                        ),
                      ),
                      TextSpan(
                        text: '\n    Pub Point',
                        style: TextStyle(
                          fontFamily: 'RobotoMono',
                          fontSize: 15.0 / textScaleFactor,
                          color: Colors.white60,
                          fontWeight: FontWeight.w500,
                        ),
                      )
                    ],
                  ),
                ),
                RichText(
                  textAlign: TextAlign.center,
                  text: TextSpan(
                    text: ' $popularity%',
                    style: TextStyle(
                      fontFamily: 'RobotoMono',
                      fontSize: 26.0 / textScaleFactor,
                      color: Colors.white,
                      fontWeight: FontWeight.w900,
                    ),
                    children: <TextSpan>[
                      TextSpan(
                        text: '\nPopularity',
                        style: TextStyle(
                          fontFamily: 'RobotoMono',
                          fontSize: 15.0 / textScaleFactor,
                          color: Colors.white60,
                          fontWeight: FontWeight.w500,
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: Column(
              children: [
                Text(
                  "Small Package Discription:",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontFamily: 'RobotoMono',
                    fontStyle: FontStyle.italic,
                    fontSize: 18.0 / textScaleFactor,
                    color: Colors.white,
                    fontWeight: FontWeight.w400,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 8),
                  child: Text(
                    "$details",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontFamily: 'RobotoMono',
                      fontStyle: FontStyle.italic,
                      fontSize: 18.0 / textScaleFactor,
                      color: Colors.white,
                      fontWeight: FontWeight.w200,
                    ),
                  ),
                ),
                SizedBox(height: MediaQuery.of(context).size.height * 0.001),
              ],
            ),
          ),
        ],
      ));
}

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 18.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Text(
            'Sign In',
            style: TextStyle(
              fontFamily: 'Futura Md BT',
              fontSize: 24.0,
              color: Colors.white,
              fontWeight: FontWeight.w500,
            ),
          ),
          Text(
            'An example Use Case Of GlassmorphicContainer',
            style: TextStyle(
              fontFamily: 'Futura Md BT',
              fontSize: 16.0,
              color: Colors.white,
              fontWeight: FontWeight.w300,
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width * 0.7,
            height: MediaQuery.of(context).size.height * 0.05,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.white54, width: 0.5),
              borderRadius: BorderRadius.circular(40),
            ),
            child: Center(
              child: Text(
                'Your Email',
                style: TextStyle(
                  fontFamily: 'Futura Md BT',
                  fontSize: 18.0,
                  color: Colors.white,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width * 0.7,
            height: MediaQuery.of(context).size.height * 0.05,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.white54, width: 0.5),
              borderRadius: BorderRadius.circular(40),
            ),
            child: Center(
              child: Text(
                'Password',
                style: TextStyle(
                  fontFamily: 'Futura Md BT',
                  fontSize: 18.0,
                  color: Colors.white,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text(
                'Next',
                style: TextStyle(
                  fontFamily: 'Futura Md BT',
                  fontSize: 24.0,
                  color: Colors.white,
                  fontWeight: FontWeight.w500,
                ),
              ),
              ClipOval(
                child: Container(
                  height: 50,
                  width: 50,
                  color: Colors.white,
                  child: Icon(
                    Icons.arrow_forward,
                    color: Colors.black,
                  ),
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

Future<int> maintest() async {
  final response = await http.Client()
      .get(Uri.parse("https://pub.dev/packages/glassmorphism/score"));
  if (response.statusCode == 200) {
    var document = parse(response.body);
    likes =
        document.getElementsByClassName("score-key-figure-value")[0].innerHtml;
    gotpoints =
        document.getElementsByClassName("score-key-figure-value")[1].innerHtml;
    totalPoints = "110";
    popularity =
        document.getElementsByClassName("score-key-figure-value")[2].innerHtml;
    details = document.getElementsByClassName("detail-lead-text")[0].innerHtml;
    pac = document.getElementsByClassName("code")[0].innerHtml;
    date = document.getElementsByClassName("metadata")[0].children[0].innerHtml;
    print("+++++++++++++++++++++++++++++++++++++++++++++++++");
    print("++                                             ++");
    print("++   It seams that your internet is working.   ++");
    print("++                                             ++");
    print("+++++++++++++++++++++++++++++++++++++++++++++++++");
    return 1;
  } else {
    print("+++++++++++++++++++++++++++++++++++++++++++++++++++++");
    print("++                                                 ++");
    print("++   It seams that your internet is not working.   ++");
    print("++                                                 ++");
    print("+++++++++++++++++++++++++++++++++++++++++++++++++++++");
    return 0;
  }
}
447
likes
120
pub points
96%
popularity

Publisher

unverified uploader

A Flutter package for implimentation of Glassmorphic UI easily.

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

Apache-2.0 (LICENSE)

Dependencies

flutter

More

Packages that depend on glassmorphism