Code for welcome.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'glassmorphism.dart';
class Welcome extends StatelessWidget {
const Welcome({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
SizedBox(
width: double.infinity,
height: double.infinity,
child: Image.asset(
"assets/glasswall.jpg",
fit: BoxFit.cover,
),
),
SafeArea(
child: Column(
children: [
const SizedBox(
height: 20.0,
),
const Center(
child: Text(
'Welcome to\nFlutter Desgin',
style: TextStyle(
color: Colors.white,
fontSize: 40.0,
fontWeight: FontWeight.bold,
),
),
),
const Spacer(),
// Build Widget Glassmorphism
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
),
child: Glassmorphism(
blur: 15,
opacity: 0.2,
radius: 20,
child: Container(
height: 200,
padding: const EdgeInsets.all(20),
child: Column(
children: [
const Text(
'Explore and Learn Flutter',
style: TextStyle(
color: Colors.white,
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
),
const SizedBox(
height: 20,
),
Text(
'Learn the best design here',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white.withOpacity(0.8),
fontSize: 16.0,
),
),
const Spacer(),
Glassmorphism(
blur: 20,
opacity: 0.1,
radius: 50.0,
child: TextButton(
onPressed: () {
// handle push to HomeScreen
},
child: Container(
padding: const EdgeInsets.symmetric(
vertical: 20,
horizontal: 20,
),
child: const Text(
'Get started now',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
),
),
),
),
],
),
),
),
),
const SizedBox(
height: 100,
),
],
),
),
],
),
);
}
}
Code for the widget glassmorphism.dart
import 'dart:ui';
import 'package:flutter/material.dart';
class Glassmorphism extends StatelessWidget {
final double blur;
final double opacity;
final double radius;
final Widget child;
const Glassmorphism({
Key? key,
required this.blur,
required this.opacity,
required this.radius,
required this.child,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(radius),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
child: Container(
decoration: BoxDecoration(
color: Colors.white.withOpacity(opacity),
borderRadius: BorderRadius.all(Radius.circular(radius)),
border: Border.all(
width: 1.5,
color: Colors.white.withOpacity(0.2),
),
),
child: child,
),
),
);
}
}
See more with Glassmorphism
Get complete code from for the above three screenshots with assets
https://www.patreon.com/posts/63830022
Get the source code for a quiz app
https://www.patreon.com/posts/63323762
Get the code for cool animation with flutter sea beach app