Make fullscreen image in Flutter
Original article at : https://fluttermaster.com/make-fullscreen-image-in-flutter/
In modern UI, you see a lot of mobile apps with fullscreen image design style, and you should know how to do it it. I will show you how to make fullscreen image in Flutter through this post.
Fullscreen image in Flutter
To achieve this, you will need to apply the decoration property on Container.
Since there are many type of decoration, we will use BoxDecoration and apply a DecorationImage with a BoxFit.cover.
So the final code to make fullscreen image in Flutter looks pretty simple.
import 'package:flutter/material.dart';void main() {
runApp(MaterialApp(
home: FullScreenPage(),
));
}class FullScreenPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://images.unsplash.com/photo-1547665979-bb809517610d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80'),
fit: BoxFit.cover
) ,
),
);
}
}
In the sample code above, I load image from an URL (credited to author at Unsplash), and display it. Certainly, you can load image from anywhere you want.
Rebuild the code or via hot-reloading, you will see:
Summary
Fairly simple and straight-forward, you have a fullscreen image page in Flutter with several lines of code.
The code demo for this post is here https://github.com/petehouston/flutter-tips/tree/master/make-fullscreen-image
Have fun :)
Follow me if you’d like to read more interesting articles about Dart and Flutter tutorials and development.
Read the blog at https://fluttermaster.com
