Posts

Showing posts from October, 2018

Flutter - Create Image Container with Round Corners and Splash Effect

Image
Introduction In this article I'm going to explain you about how image with round corners and splash effect is created using Flutter widgets. Before doing some coding, let's see how images are loaded in Flutter and what the splash effect means. Images in flutter In flutter apps, we can load images from network, assets (App resources) or from the file system. Loading images from network is very easy task in flutter using Image.network constructor. Image.network( 'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg', ) If you want to load images from network and cache it for offline usage, you can use CachedNetworkImage widget. You need to add cached_network_image dependency to use it. Click here to see installation instructions. CachedNetworkImage( placeholder: CircularProgressIndicator(), imageUrl: '

Flutter - Using Fixed Width Widgets Inside ListView

Image
ListView is used to display scrollable list of widgets. Children inside ListView takes whole width of ListView by default. So elements inside ListView expands to take whole width. There are couple of ways we can set fixed width to elements inside ListView. Using Align - Set alignment property of the Align widget to Alignment.center , Alignment.centerLeft , Alignment.centerRight etc. ListView( children: [ Align( alignment: Alignment.center, child: SizedBox( width: 160.0, height: 160.0, child: Image.asset('images/default_avatar.jpg'), ), ), ], ); Using Container - In here Align widget is internally used inside Container ListView( children: [ Container(

Popular posts from this blog

Flutter - Create Image Container with Round Corners and Splash Effect

AVR Analog Comparator

JAudioTagger - ID3 tagger library