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
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
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
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]), )
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. Thank you for reading this post.
