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
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.
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.
You might also like:
How To Easily Customize Flutter Carousel Slider AutoPlay
How To Easily Customize Flutter Glassmorphism Container
How To Easily Use Flutter Carousel Slider OnPageChanged
How To Easily Set Flutter Box Shadow Only Top
How To Easily Change Flutter Container Height
Acer Predator Helios 300 PH315 54 760S Gaming Laptop Amazing Specs
How To Easily Set Flutter Carousel Slider Full Width
How To Easily Change Flutter Container Alignment
How To Easily Change Flutter Appbar Icon Color Theme
How to Easily Change Flutter Appbar Default Height
