Skip to content

Instantly share code, notes, and snippets.

@iamEtornam
Created August 29, 2019 16:52
Show Gist options
  • Save iamEtornam/0e7f0bd56a3d55f0edb3391e91f5e531 to your computer and use it in GitHub Desktop.
Save iamEtornam/0e7f0bd56a3d55f0edb3391e91f5e531 to your computer and use it in GitHub Desktop.
adding blurred background with image in flutter
import 'dart:ui';
import 'package:flutter/material.dart';
class ProfilePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: ListView(
children: <Widget>[
Container(
height: 140,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://www.setaswall.com/wp-content/uploads/2018/04/1125x2436-Wallpaper-297.jpg'),
fit: BoxFit.cover)),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Container(
decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
radius: 60,
backgroundImage: NetworkImage(
'https://www.setaswall.com/wp-content/uploads/2018/04/1125x2436-Wallpaper-297.jpg'),
),
SizedBox(width: 15,),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Kidi', style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
color: Colors.white),),
Text('256,086 Followers', style: TextStyle(
fontWeight: FontWeight.w500, color: Colors.white
),)
],
),
MaterialButton(
color: Colors.blue,
onPressed: () {},
child: Center(child: Text('Follow',
style: TextStyle(color: Colors.white),)),
height: 30,
minWidth: 120,
)
],
)
],
),
),
),
)
],
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment