Summary of the article

In the last article we got our first taste of Flutter and learned how to create projects and heat load them. In this article we further feel the effect of Flutter by completing a list of examples. By reading this article you will know the following:

  • How to develop Flutter applications using Android Studio
  • How do I introduce third-party libraries
  • Understand the main structure of the Flutter project

The following is an example effect

Create a project

Open Android Studio, File->New->New Flutter Project… Select Flutter Application, enter the project name, location, and description, select Next, enter the company information, and click FInish. After the project is opened, we mainly use the following functions:

Introducing third-party libraries

To implement the list project we need to use a third library. The third library of Flutter depends on the file pubspec.yaml. To open this file, type:

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^ 0.1.2
  english_words: ^ 3.1.0

dev_dependencies:
Copy the code

Cupertino_icons is a library of font ICONS and English_words is a library that generates English words.

Then run the following command on the CLI

~/my/flutter/flutter_frist $ flutter packages get
Copy the code

You may encounter problems with content that cannot be downloaded. This is the reason for the wall. This can be solved by modifying the domestic mirror.

~/my/flutter/flutter_frist $ export PUB_HOSTED_URL=https://pub.flutter-io.cn
~/my/flutter/flutter_frist $ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
Copy the code

Obtain dependencies by executing the flutter Packages GET again.

List implementation

With that in mind, we’re ready to write code to finish today’s task. Open main.dart and clean out the code inside. Enter the following code:

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart'; // Import third-party library headers

void main() => runApp(MyApp()); // Project entry

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) { // The build method is automatically executed when the project is started.
    return MaterialApp(
      title: "Startup Name Generator", home: RandomWord() ); }}Copy the code

In this code we introduce a third party file to create a project entry.

StatelessWidget inherits from widgets. A Widget is a core component of the Flutter framework. A StatelessWidget represents an immutable Widget.

Of course the above code is not executable yet, we need to implement RandomWord.

class RandomWordsStatus extends State<RandomWord> {

  Widget _buildRow(WordPair pair) {
    @override
    Widget build(BuildContext context) {
      return Scaffold (
        appBar: AppBar(  / / the navigation bar
          title: Text('Startup Name Generator'), / / title
          actions: <Widget>[  / / button
            IconButton(icon: Icon(Icons.list), onPressed: _pushSaved ,) 
          ],
        ),
        // body: _buildSuggestions(),); }}}class RandomWord  extends StatefulWidget {
  @override
  RandomWordsStatus createState() => RandomWordsStatus();
}

Copy the code

Run the project at this point and you get a blank page with a navigation bar.

Next we finish the list

 Widget _buildSuggestions() {
    _suggestions.clear();
    _suggestions.addAll(generateWordPairs().take(20)); // The data source randomly generates 20 words
    return ListView.builder(
      padding: const EdgeInsets.all(16.0),
        itemCount: _suggestions.length,
      itemBuilder: (context, i) {
        if (i.isOdd) return Divider(); // Display the dividing line
        return _buildRow(_suggestions[i]); // Display the document
      });
  }

/ / render cell
Widget _buildRow(WordPair pair) {
    final bool alreadySaved = _saved.contains(pair);
    return ListTile (
      title: Text(pair.asPascalCase,
      style: _biggerFont,
      ),
      trailing: Icon(
          alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors
            .red : null,
      ),
      onTap: () {  // Click the event
        setState( // This method automatically refreshes the interface.() {if(alreadySaved) {
                _saved.remove(pair);
              } else{ _saved.add(pair); }}); });Copy the code

At this point we have a list.

Now let’s implement the click event.

void _pushSaved() {
    Navigator.of(context).push( //push next page
      MaterialPageRoute<void>(
        builder: (BuildContext context) {
          //
          final 可迭代<ListTile> tiles = _saved.map(
                  (WordPair pair) {
                returnListTile( title: Text( pair.asPascalCase, style: _biggerFont, ), ); });final List<Widget> divided = ListTile
              .divideTiles(
              context: context,
              tiles: tiles
          ).toList();

          return Scaffold(
            appBar: AppBar(title: Text('saved Suggestions'),), body: ListView(children: divided,), ); })); }Copy the code

conclusion

OK, to this our list page is finished, do not know your program has not run, you can refer to my source code to improve your code.

This article referred to the official Demo of Flutter and experienced the development process of Flutter. Personally, I think the development experience of Flutter is much more efficient than React Native. Of course, there are many things we do not understand in this article, which will be explained one by one in the following articles. If you are interested in Flutter, you can follow my public account.