Posts

Showing posts with the label Flutter

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( ...

Flutter - Coding Patterns

Documenting tips Programming is sometimes 60% coding and 40% documenting. So it's very useful to know about documenting tips. If you are having trouble coming up with useful documentation, here are some useful tips. Avoid checking in comments that ask questions // BAD: // What should this be? // This is a workaround. // GOOD: // According to this specification, this should be 2.0, but according to that // specification, it should be 3.0. We split the difference and went with // 2.5, because we didn't know what else to do. // TODO(username): Converting color to RGB because class Color doesn't support // hex yet. See http://link/to/a/bug/123 Avoid useless documentation // BAD: /// The background color. final Color backgroundColor; /// Half the diameter of the circle. final doub...

Popular posts from this blog

JAudioTagger - ID3 tagger library

Flutter - Create Image Container with Round Corners and Splash Effect

Maven - Create Executable Jar