Flutter第二天

Flutter第二天

昨天已经把flutter的开发环境搭建完成,从今天起就开始试着编写一些简单的页面,在开发的过程中,主要使用的Dart语法。想要了解Dart的可以点击下面的官网链接去了解。
官网链接

Hello World

学习一门语言,从学会Hello World开始,下面开始say Hello。

  1. 编写基于Flutter第一天中创建的工程
  2. 打开lib目录下的main.dart,按照下面格式修改

  class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {

    String title='Flutter 第一天';
    return MaterialApp(
      title: title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
        appBar: new AppBar(title: new Text(title)),
        body: new Center(
          child: new Text('Hello World',),
      ),
    )
    );
  }
}
  1. 编写完成之后,点击运行如图
  2. 运行效果如下
    运行效果

可交互的页面

最终实现效果如下图:
在这里插入图片描述

实现步骤

  1. 添加依赖
       english_words: ^4.0.0
    
    在这里插入图片描述
  2. pubspec.yaml添加依赖之后,需要获取下依赖包,IDE会提示,点击Pub get
    在这里插入图片描述
  3. 之后就可以在dart文件中使用依赖中的资源了,首先定义个statefull widget,实现一个stateful widget需要用到两个类

1、一个StatefulWidget类
2、一个State类

  1. 具体类如下:
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';


class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);
  //添加收藏
  final _saved = new Set<WordPair>();


  @override
  Widget build(BuildContext context) {
    /*final wordPair = new WordPair.random();
    return new Text(wordPair.asPascalCase);*/
    void _pushSaved(){
      Navigator.of(context).push(
        new MaterialPageRoute(
          builder: (context) {
            final tiles = _saved.map(
                  (pair) {
                return new ListTile(
                  title: new Text(
                    pair.asPascalCase,
                    style: _biggerFont,
                  ),
                );
              },
            );
            final divided = ListTile
                .divideTiles(
              context: context,
              tiles: tiles,
            ).toList();

            return new Scaffold(
              appBar: new AppBar(
                title: new Text("Savad Suggestions"),
              ),
              body: new ListView(children: divided,),
            );
          },
        ),);
    }
    return new Scaffold(
        appBar: new AppBar(
        title: new Text('Startup Name Generator'),
        actions: <Widget>[
          new IconButton(icon: new Icon(Icons.list),onPressed: _pushSaved )
        ],
      ),

      body: _buildSuggestions(),

    );
  }
  ///用来构建一行的Widget,行的内容为一个随机生成的单词对和一个图标
  Widget _buildRow(WordPair pair){
    final  alreadySaved = _saved.contains(pair);
    return  new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      trailing: new Icon(
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors.red : null,
      ),
      ///增加点击的事件
      onTap: (){
        setState(() {
          if(alreadySaved){
            _saved.remove(pair);
          }else{
            _saved.add(pair);
          }
        });
      },

    );
  }
  Widget _buildSuggestions() {
    return new ListView.builder(
        padding: const EdgeInsets.all(16.0),
        itemBuilder: (context,i) {
          if(i.isOdd) return new Divider();
          final index = i ~/2;
          if(index >= _suggestions.length){
            _suggestions.addAll(generateWordPairs().take(10));
          }
          return _buildRow(_suggestions[index]);
        }
    );

  }
}
class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => new RandomWordsState();

}
  1. 为了后续方便管理,我定义了一个Day2App,并继承StatelessWidget,代码如下


import 'package:flutter/material.dart';
import 'package:wangbl_flutter/random_words.dart';

class Day2App extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {

    String title='Flutter 第二天';
    return MaterialApp(
        title: title,
        theme: ThemeData(

          primarySwatch: Colors.blue,
        ),
        home: new RandomWords()
    );
  }
}
  1. 然后在main.dart中引用Day2App
    在这里插入图片描述
  2. 此时运行,就可以看到开头时的效果了。

如果运行过程中出现问题的话,可以参考我github上的代码,或者直接将我的代码down下来运行。
传送门

好了,第二天内容到此结束,感谢阅读。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

無昂博奥

测试下大赏功能,请勿大赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值