How To Easily Change 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.

Outline

What is Flutter Glassmorphism Container Size?
Custom Flutter Glassmorphism Container Size(Multiple Examples)
Flutter Glassmorphism Container Size Customization Source Code
Conclusion

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

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

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.

I would also highly recommend my other posts for you. These posts are related to beautiful Flutter templates, Flutter app development, custom Flutter animations, Flutter web, Flutter widgets, Flutter books and many more.

Some links to these topics can be found listed below. Others posts can be found by using this site’s search box or navigation menu bar. Thank you for reading this post.

Flutter app articles you might like to read: flutter appbar title center, explanation of widgets in flutter, flutter architecture, flutter vs native, flutter sliverappbar customization, why learn react native framework, react native jobs, react native elements, unique flutter development. mobile app marketing tips, flutter bottom navigation bar, flutter appbar actions, beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter basics for beginners.