If you are trying to set background image to your Flutter app, then you came to the right place.
Before making one, Most of the below examples, images are loaded from the Assets directory.
So you need to define it in pubspec.yaml. At the same time, You need to create an assets folder and put the image in there.
assets:
- assets/
Contents
- 1. How To Add Background Image To Container?
- 2. Flutter background image full-screen Example
- 3. Flutter Background Image Full Screen Example Using Stack
- 4. Flutter Background Image Blur Example
- 5. Flutter Background Blur Image using Stack
- 6. Flutter Fullscreen Image Using URL
- 7. How To Add Gradient Over Full Screen Image?
- 8. Flutter Login Page with Background image
Let’s start with a simple one.
- How To Set Background Color In Flutter?
- Create Flutter Project In Android Studio
- 7 Flutter Commands You Must Know
1. How To Add Background Image To Container?
- Using the decoration property of a Container, we can easily add a background image.
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/fitness.jpg'),
fit: BoxFit.cover,
),
)
- You can replace AssetImage with NetworkImage(), if you want to display image using URL address.
- Image In Circle Shape – Using CircleAvatar
Using above code inside Container, You can add Image as background.
Let’s make the above example.
- In this example, Center Widget used to align the Text Widget.
- Container’s margin property set free space around Container. You can also use Padding.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Add Background Image To Container Example'),
),
body: Container(
margin: EdgeInsets.all(8.0),
child: Center(
child: Text(
'FITNESS',
style: TextStyle(
backgroundColor: Colors.black38,
fontSize: 25.0,
color: Colors.white,
),
),
),
width: double.infinity, //stretches to maximum width
height: 200.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/fitness.jpg'),
fit: BoxFit.cover,
),
),
),
),
);
}
}
- Don’t forget to add assets in pubspec.yaml.
Let’s make rounded corners to Container
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(10.0), //makes the border circular
image: DecorationImage(
image: AssetImage('assets/fitness.jpg'),
fit: BoxFit.cover,
),
),
- borderRadius: BorderRadius.circular(10.0) – It makes borders rounded.
2. Flutter background image full-screen Example
In this example, you will learn how to set an image as the background and make it to full screen.
In this example,
- constraints: BoxConstraints.expand() – It makes container to use maximum width and height. If width and height values not provided.
- Using center and Column widgets, Text widgets can align to center.
- Here, SizedBox just gives some empty space between the Text widgets.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
constraints: BoxConstraints.expand(),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/sky.jpg'),
fit: BoxFit.cover,
),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'ANDROIDRIDE',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 35.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
SizedBox(
height: 8,
),
Text(
'Flutter Image BackGround \n Full Screen Example',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
],
),
),
),
),
);
}
}
3. Flutter Background Image Full Screen Example Using Stack
Above Example, I have used Container to set Image as background. In this one, We will use Stack.
Okay…Let’s do it.
In this example,
- Positioned.fill() – it makes image to fill the entire screen.
- Using Positioned widget, you can align Widgets in Stack.
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//resizeToAvoidBottomInset: false,
body: Stack(
children: [
Positioned.fill(
child: Image(
image: AssetImage("assets/mystery.jpg"),
fit: BoxFit.cover,
),
),
Positioned(
top: 330,
left: 70,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'ANDROIDRIDE',
style: TextStyle(
backgroundColor: Colors.black54,
fontSize: 35.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
Text(
'Flutter background Image Using Stack',
style: TextStyle(
backgroundColor: Colors.black87,
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
)
],
),
),
],
));
}
}
Flutter Background Image Blur Example
In Flutter, you can easily make images blur. Let’s use BackdropFilter, ImageFilter.blur() and make this example.
Okay…Let’s see the final output.
- BackdropFilter widget won’t give blur effect to its child but beneath it – Here AssetImage
- Using ImageFilter.blur value, you can control the blur effect.
- In this example, I have used black color with opacity, this helps viewers to read text easily.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/sky.jpg'),
fit: BoxFit.cover,
),
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Container(
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.3),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'ANDROIDRIDE',
style: TextStyle(
fontSize: 35.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
Text(
'Flutter Background Image Blur Example 1',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
],
),
),
),
),
),
),
);
}
}
Flutter Background Blur Image using Stack.
In this example, you will learn how to make image blur using ImageFiltered Widget.
- In this example, ImageFiltered widget is used to create blur effect.
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//resizeToAvoidBottomInset: false,
body: Stack(
children: [
Positioned.fill(
child: ImageFiltered(
imageFilter: ImageFilter.blur(
sigmaX: 10.0,
sigmaY: 10.0,
),
child: Image(
image: AssetImage("assets/mystery.jpg"),
fit: BoxFit.cover,
),
),
),
Positioned(
top: 320,
left: 60,
child: Column(
children: [
Text(
'ANDROIDRIDE',
style: TextStyle(
backgroundColor: Colors.black12,
fontSize: 35.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
SizedBox(
height: 8,
),
Text(
'Flutter Background Blur Image Using Stack',
style: TextStyle(
backgroundColor: Colors.black12,
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
],
),
),
],
),
);
}
}
6. Flutter Fullscreen Image Using URL
Actually, this example is not necessary. Because we already did it using AssetImage. Here we just changing with NetworkImage. Sometimes, this may help beginners.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
constraints: BoxConstraints.expand(),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://images.pexels.com/photos/2102367/pexels-photo-2102367.jpeg'),
fit: BoxFit.cover,
),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'ANDROIDRIDE',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 35.0, color: Colors.white),
),
),
Text(
'Flutter Image BackGround Full Screen - NetworkImage',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15.0,
color: Colors.white,
),
),
],
),
),
),
),
);
}
}
How To Add Gradient Over Full Screen Image?
Let’s make a gradient overlay over the image and display it.
- You can set Gradient using gradient property of BoxDecoraion.
- LinearGradient begin and end property defines where to start and end gradient color.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: [
Container(
constraints: BoxConstraints.expand(),
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://cdn.pixabay.com/photo/2019/03/13/11/04/copenhagen-4052654_1280.jpg',
),
),
),
),
Opacity(
opacity: 0.85,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Colors.red,
Colors.blue,
]),
),
),
),
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'ANDROIDRIDE',
style: TextStyle(
fontSize: 35.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
Text(
'Flutter Background Image Full Screen Gradient ',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
],
),
),
],
),
),
);
}
}
Flutter Login Page with Background image
Let’s make a Login page with form validation.
Looks nice. isn’t it?
- When the User tap on ElevatedButton (You can use RaisedButton, FlatButton or FloatingActionButton) after typing username and password, control goes to _printFormValues() method.
- If the validation is successful, It will print form values. Otherwise, shows validation errors.
- Flutter TextFormField PlaceHolder Example
Validation Demo:
-
- Using Form and TextFormFields, It’s easier to make a login page and also helpful to validate the inputs.
- autofocus:true enables focus on username TextFormField.
- When username is typed and taps on the softkeyboard bottom Right Corner key defined using textInputAction: TextInputAction.next. It calls onFieldSubmitted(), and Change focus to next TextFormField.
class _MyAppState extends State {
final white = Colors.white;
final _passwordFocusNode = FocusNode();
bool hidePassword = true;
final _formKey = GlobalKey();
final outlineInputBorder = OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
borderSide: BorderSide(color: Colors.white),
);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
resizeToAvoidBottomInset: false,
body: Center(
child: Container(
constraints: BoxConstraints.expand(),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/subway.jpg'),
fit: BoxFit.cover,
),
),
child: SingleChildScrollView(
child: Center(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SizedBox(
height: 150,
),
Text(
'ANDROIDRIDE',
style: TextStyle(
fontSize: 36,
color: white,
),
textAlign: TextAlign.center,
),
SizedBox(
height: 30,
),
TextFormField(
autofocus: true,//autofocus enabled.
onSaved: (newValue)
{
//prints value when _formKey.currentState.save();
print("Username: $newValue");
},
validator: (value)//provides value in TextFormField
{
if (value.isEmpty)
{//TextFormField is empty, show below text
return 'Please type your username';
}
//return null means successful validation.
return null;
},
onFieldSubmitted: (_)
{//change Focus to next TextFormField (here password TextFormField)
FocusScope.of(context)
.requestFocus(_passwordFocusNode);
},
//soft keyboard shows next icon in bottom right corner
textInputAction: TextInputAction.next,
style: TextStyle(
color: white,
),
maxLines: 1,
decoration: InputDecoration(
hintText: 'Username',
focusedBorder: outlineInputBorder,
border: outlineInputBorder,
hintStyle: TextStyle(
color: white,
),
prefixIcon: const Icon(
Icons.account_circle_outlined,
color: Colors.grey,
),
),
),
SizedBox(
height: 15,
),
TextFormField(
maxLines: 1,
obscureText: hidePassword,//true hides password, false shows.
focusNode: _passwordFocusNode,
onSaved: (newValue)
{ //print value when _formKey.currentState.save() calls.
print("Password: $newValue");
},
validator: (value)
{
//validates when _formKey.currentState.validate() calls.
if (value.isEmpty) {
return 'Enter your password';
}
if (value.length < 4) {
return 'password must be at least 4 characters';
}
return null;
},
style: TextStyle(
color: white,
),
decoration: InputDecoration(
hintText: 'Password',
focusedBorder: outlineInputBorder,
border: outlineInputBorder,
hintStyle: TextStyle(
color: white,
),
prefixIcon: const Icon(
Icons.lock_open_outlined,
color: Colors.white54,
),
suffixIcon: IconButton(
onPressed: () {
setState(()
{
hidePassword = !hidePassword;
});
},
icon: Icon(
hidePassword
? Icons.visibility
: Icons.visibility_off,
color: Colors.white70,
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
Colors.white24),
),
onPressed: () {
//calls _printFormValues() method
_printFormValues();
},
child: Text('LOGIN'),
),
),
],
),
),
),
),
),
),
),
),
);
}
}
- When both TextFields submitted and ElevatedButton tapped, it calls _printFormValues() method.
- _formKey.currentState.validate() calls, it internally calls validator in TextFormFields, validates and returns true if there are no errors.
- Otherwise shows text message which specified in validator.
- _formKey.currentState.save() internally calls onSaved when there are no validation errors.
- resizeToAvoidBottomInset: false, prevents resizing body.
- Don’t forget to dispose the FocusNode.
void _printFormValues() {
final _isTrue = _formKey.currentState.validate();
if (!_isTrue) {
return;
}
_formKey.currentState.save();
}
@override
void dispose() {
_passwordFocusNode.dispose();
super.dispose();
}
That’s all for now. Thank you.
More Information : Container Docs