iT邦幫忙

0

Flutter 05

In Flutter application we can insert images, using local images or using images online by inserting the image url into the code.

  • Online Images
    In this example we’re inserting image into the Body widget. We first remove the text, then we use the code as below.
body: Center( //LOCATED IN THE MIDDLE
    child: Image(
        image: NetworkImage('https://www.xantheberkeley.com/wp-content/uploads/2013/10/sky_xantheberkeley.jpg')//image url
    ),
  )

The result is as follow :

-Assets Images
If we wish to use local images, we use AssetImage() to do, instead of Internet url, we insert a local url.
we first create a new directory, let’s call it assets.

Then, we drag some downloaded images into the directory. Before we insert local images, we need to make some changes in the pubspec.yaml file, so that we can use these images as our assets.

Very similar to the one we do on the font, we modify the assets part in the pubspec.yamlfile.


Then inside the assets directory.

From now on we can use any images inside the assets directory.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: home(),
));

class home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold( //ROOT WIDGET
      appBar: AppBar(
        title: Text(
          'CodeForces',
          style: TextStyle(
            fontSize: 25.0,
            letterSpacing: 2.0,
            color: Colors.white,
            fontFamily: 'BebasNeue',
          ),
        ), //SET THE TITLE TEXT
        centerTitle: true,    //SET THE PROPERTIES, WHERE THE TEXT SHOWED AT THE CENTRE
        backgroundColor: Colors.red,
      ),
      body: Center( //LOCATED IN THE MIDDLE
        child: Image(
            image: AssetImage('assets/1.jpg')
        ),
      ),
      floatingActionButton: FloatingActionButton( //CREATE A FLOATING BUTTON
        child: Text('click'),
        backgroundColor: Colors.red[600],
      ),
    );
  }
}

There’s also a short version for more easier coding.

  • For Network Images:
body: Center( //LOCATED IN THE MIDDLE
    child: Image.network('url'),
    ),
  • For Assets
body: Center( //LOCATED IN THE MIDDLE
    child: Image.asset('url'),
    ),

Flutter Tutorial for Beginners #8 - Images & Assets


尚未有邦友留言

立即登入留言