Images, Icons & Buttons - ArtemMikhaylov/my_flutter_notes GitHub Wiki

Images

To show an image from network

Image(
  image: NetworkImage('https://images.unsplash.com/photo-1579225056425'),
),

or shorter

Image.network('https://images.unsplash.com/photo-1579225056425'),

To add images from assets (aka assets & resources in Android) you should create a folder in the project directory and put files in it. If you need images/icons for different screen densities, you have to create subfolders with names: 1.5x, 2.0x, etc. You also have to declare the main folder in pybspec.yaml file.

img

And from code:

Image(
  image: AssetImage('images/logo.png'),
),

or shorter

Image.asset('images/logo.png'),

See also: Image (Flutter Widget of the Week)

Scale types

Image.network(
  photoUrl,
  fit: BoxFit.cover,
)

Android ScaleType and BoxFit should match like this: https://stackoverflow.com/a/49121328/3165400

Image from network with loading indicator and fade in effect

Flutter docs Cookbook: Fade in images with a placeholder

kTransparentImage -trasparent image pluging needed

Stack(
  children: <Widget>[
    Center(child: CircularProgressIndicator()),
    Container(
      child: FadeInImage.memoryNetwork(
        placeholder: kTransparentImage,
        image: src,
        fit: BoxFit.cover,
      ),
    ),
  ],
);

Icons

Flutter has the set of material icons that you can use

Icon(
  Icons.account_balance_wallet,
  color: Colors.lightBlue,
  size: 36.0,
)

Buttons

Button with text

FlatButton(
  onPressed: () {},
  child: Text('Tadaaam!'),
  color: Colors.purple,
),

Button with icon and text (but this way it is not possible to align icon to the left. Both, icon and text will be aligned to center)

RaisedButton.icon(
  onPressed: (){},
  icon: Icon(
    Icons.mail,
  ),
  label: Text('sent email'),
  color: Colors.amber,
)

More flexible way, with icon alignment to the left.

Padding(
  padding: const EdgeInsets.all(8.0),
    child: Container(
      child: FlatButton(
        onPressed: (){},
        child: Stack(
          children: <Widget>[
            Align(
              alignment: Alignment.centerLeft,
              child: SvgPicture.asset(
                'images/ic_google.svg',
                color: Colors.white,
              ),
            ),
            Align(
              alignment: Alignment.center,
                child: Text(
                  'Google',
                   style: TextStyle(
                     color: Colors.white,
                   ),
                ),
             )
          ],
        ),
        color: Colors.red.shade500,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(50),
        ),
      ),
      width: 260,
      height: 50,
    ),
),

Capsule button (https://stackoverflow.com/a/55983602/3165400)

shape: RoundedRectangleBorder(
  borderRadius: BorderRadius.circular(50),
),

IconButton aka Android ImageButton

IconButton(
  onPressed: () {},
  icon: Icon(
    Icons.access_time,
  ),
  color: Colors.pink,
  iconSize: 48.0,
)

Vector, SVG

there's a library https://pub.dev/packages/flutter_svg

  • If you want to change color of svg icon programitically, you should add svg with full opacity.
RaisedButton.icon(
  onPressed: (){},
  icon: SvgPicture.asset('images/ic_facebook.svg'),
  label: Text(
    'Facebook',
     style: TextStyle(
       color: Colors.white,
     ),
    ),
   color: Colors.blue.shade700,
),
⚠️ **GitHub.com Fallback** ⚠️