Flutter series (four) basic UI practice

Hello, welcome to my attention, this article is a series of text about Flutter, Flutter introduced beginning from simple, step by step take you into the world of Flutter. You have some of the best mobile development experience, if not do not worry, at the bottom of my columns give me a message, I will do my best to answer you.

Last article we introduced the overall architecture Flutter, I believe we certainly impressive, this article introduces the basic Flutter UI building, from themes, tips, pictures and animation to load introduced four directions.

A. Use Theme Manager colors and font styles

Using themes you can adopt a unified color and style in the application. Custom theme in two ways: built-in theme or custom Theme class .
1. Built-in theme

new MaterialApp(
  title: title,
  theme: new ThemeData(
    brightness: Brightness.dark,
    primaryColor: Colors.lightBlue[800],
    accentColor: Colors.cyan[600],
  ),
);

2. Custom Theme

new Theme(
  // Create a unique theme with "new ThemeData"
  data: new ThemeData(
    accentColor: Colors.yellow,
  ),
);

3. Use theme

After you create a theme by the above two methods, we can use the theme by Theme.of (context) function in the build method of Widget.

new Container(
  color: Theme.of(context).accentColor,
  child: new Text(
    'Text with a background color',
    style: Theme.of(context).textTheme.title,
  ),
);

By ThemeData document to view the topics which support a predefined color

you can view the system prefabricated font style by TextTheme. For example theme.textTheme.title example mentioned is like this:

SnackBar
have in Android Toast prompted the concept, but not in the Flutter in Toast, replaced by SnackBar.

Want to create a SnackBar, we need to use Scaffold container, before the articles have talked about Scaffold is a container containing Material Design.

Scaffold(
  appBar: AppBar(
    title: Text('SnackBar Demo'),
  ),
  body: SnackBarPage(), // We'll fill this in below!
);

Next, create a button:

return Center(
      child: RaisedButton(
        onPressed: _showSnackBar,
        child: Text('Show SnackBar'),
      ),
    );

Click the button when the show SnackBar:

void _showSnackBar() {
    final snackBar = SnackBar(
            content: Text('Yay! A SnackBar!'),
            action: SnackBarAction(
              label: 'Undo',
              onPressed: () {
                // Some code to undo the change!
              },
            ),
          );

    Scaffold.of(context).showSnackBar(snackBar);
}

II. Load picture from the web

In Flutter used directly Image.network can load a picture

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var title = 'Web Images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Image.network(
          'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
        ),
      ),
    );
  }
}

The method can also load GIF images directly

Image.network(
  'https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true',
);

FIG be increased by a placeholder placeholder properties:

FadeInImage.assetNetwork(
  placeholder: 'assets/loading.gif',
  image: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);

It is noteworthy that with Image.network loaded images are not cached, if you want to load images and cached, you would use:

CachedNetworkImage(
  placeholder: CircularProgressIndicator(),
  imageUrl: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);

If you are interested in image cache strategy Flutter, please continue to focus on this column, after the article, I will share to you

III. Animation

This section only describes a simple animation started, then there is the article will detail Flutter animation.
In the last article spoke of all the things that are Flutter Widget, including animation is no exception, if you want a Widget properties contain animation, then you need to wrap it up with a AnimatedOpacity, AnimatedOpacity also a Widget.

AnimatedOpacity(
  // If the Widget should be visible, animate to 1.0 (fully visible). If
  // the Widget should be hidden, animate to 0.0 (invisible).
  opacity: _visible ? 1.0 : 0.0,
  duration: Duration(milliseconds: 500),
  // The green box needs to be the child of the AnimatedOpacity
  child: Container(
    width: 200.0,
    height: 200.0,
    color: Colors.green,
  ),
);

We used to call a StatefulWidget setState () method to refresh the value of _visible can display animation, it is not very simple?

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Opacity Demo';
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

// The StatefulWidget's job is to take in some data and create a State class.
// In this case, our Widget takes in a title, and creates a _MyHomePageState.
class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

// The State class is responsible for two things: holding some data we can
// update and building the UI using that data.
class _MyHomePageState extends State<MyHomePage> {
  // Whether the green box should be visible or invisible
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: AnimatedOpacity(
          // If the Widget should be visible, animate to 1.0 (fully visible). If
          // the Widget should be hidden, animate to 0.0 (invisible).
          opacity: _visible ? 1.0 : 0.0,
          duration: Duration(milliseconds: 500),
          // The green box needs to be the child of the AnimatedOpacity
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.green,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Make sure we call setState! This will tell Flutter to rebuild the
          // UI with our changes!
          setState(() {
            _visible = !_visible;
          });
        },
        tooltip: 'Toggle Opacity',
        child: Icon(Icons.flip),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

This article from the theme, tips, pictures and animation to load four simple introduction Flutter of UI creation process, in order to avoid the article is too long leads to poor readability, so simply speaking of these four aspects, as well as more content will be introduced in the following article. I believe that after reading this article, you already know how to use Flutter Widget, the next column to the point of actual combat, I will teach you how to implement a carousel indicator.