How To Easily Change Flutter Glassmorphism Container Size

Flutter glassmorphism container size

In this Flutter post, we will be practically changing the Flutter glassmorphism container size using an easy Flutter example. I hope after reading this post, you won’t find any difficulties in customizing the Flutter glassmorphism container size as we will be discussing each and everything with step by step explanation.

What is Flutter Glassmorphism Container Size?

As the name suggests, it is the size of Flutter glassmorphism container means its height and width. We will be changing the height and width of Flutter glassmorphism container by using an easy Flutter example.

Custom Flutter Glassmorphism Container Size(Multiple Examples)

In this post, we will just talk about the customization of Flutter glassmorphism container size. If you are interested in other properties as well then click here.

The mentioned design complete explanation is discussed in my previous post. Click here to navigate to that post.

To change the size of Flutter glassmorphism container, we have to use the height and width constructor of glassmorphic container class. Both these constructors takes a double(decimal) value but we can pass integer as well(automatically converted).

For demonstration, we will be using multiple examples so you can have a clear idea of how to change Flutter glassmorphism container size. See below examples:

Example 1

Flutter glassmorphism container custom size

GlassmorphicContainer(
                    width: 300,
                    height: 200,
                    borderRadius: 20,
                    linearGradient: LinearGradient(
                        colors: [Colors.white10, Colors.white10]),
                    border: 1,
                    blur: 10,
                    borderGradient: LinearGradient(
                        colors: [Colors.white10, Colors.white30]),
                  )

Example 2

Flutter glassmorphic container size

GlassmorphicContainer(
                    width: 300,
                    height: 100,
                    borderRadius: 20,
                    linearGradient: LinearGradient(
                        colors: [Colors.white10, Colors.white10]),
                    border: 1,
                    blur: 10,
                    borderGradient: LinearGradient(
                        colors: [Colors.white10, Colors.white30]),
                  )

Example 3

Flutter glassmorphism container size

GlassmorphicContainer(
                    width: 100,
                    height: 200,
                    borderRadius: 20,
                    linearGradient: LinearGradient(
                        colors: [Colors.white10, Colors.white10]),
                    border: 1,
                    blur: 10,
                    borderGradient: LinearGradient(
                        colors: [Colors.white10, Colors.white30]),
                  )
So this is how you can easily change the Flutter glassmorphism container size in your own Flutter apps easily. Do let me know if you still have any questions related to the customization of Flutter glassmorphism container size. I would be glad to answer them all.
Below section has a complete source code in which Flutter glassmorphism container size is customized.

Flutter Glassmorphism Container Size Customization Source Code

Flutter glassmorphism container size

import 'package:flutter/material.dart';
import 'package:glassmorphism/glassmorphism.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Container(
                height: double.infinity,
                width: double.infinity,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        fit: BoxFit.cover,
                        image: AssetImage('assets/cartoon.jpg'))),
                child: Center(
                  child: GlassmorphicContainer(
                    alignment: Alignment.center,
                    width: 300,
                    height: 200,
                    borderRadius: 20,
                    linearGradient: LinearGradient(
                        colors: [Colors.white10, Colors.white10]),
                    border: 1,
                    blur: 10,
                    borderGradient: LinearGradient(
                        colors: [Colors.white10, Colors.white30]),
                    child: Text(
                      'Glassmorphic Size Customized',
                      style: TextStyle(shadows: [
                        Shadow(
                            blurRadius: 3,
                            offset: Offset(3, 3),
                            color: Colors.black38)
                      ], color: Colors.white, fontSize: 17),
                    ),
                  ),
                ))));
  }
}

Conclusion

In conclusion, now you have a practical and in depth knowledge of how to change Flutter glassmorphism container size. I would love to have your feedback on this post. Thank you for reading this post.

Leave a Comment

Your email address will not be published.