Flutter初步了解1以及碰上一个很蛋疼的错误

文章目录

Material Design设计风格

参考以下文章：
安卓Material Design设计原则
Flutter使用的是Material Design的设计风格

Flutter主题

全局主题：使用Theme来定义程序局部的颜色和字体样式。事实上全局主题只是由应用程序根，MaterialApp创建主题（Theme）

创建应用主题

ThemeData提供给MaterialAPP构造函数，这样就可以在整个应用程序中共享包含颜色和字体样式的主题。

如果真是这样的话就不用跟安卓一样了每次都需要自己去定义那些字体颜色，而且每次新建一个项目又得重新去复制弄过去。

ThemeData 属性含义及描述
使用自定义主题

修改main.dart中的代码
完整代码如下：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appName = '自定义主题';

    return new MaterialApp(
      title: appName,
      theme: new ThemeData(
        brightness: Brightness.dark, //应用整体亮度
        primaryColor: Colors.lightGreen[600], //app主要背景颜色
        accentColor: Colors.orange[600], //前景色
      ),
      home: new MyHomePage(
        title: appName,
      ),
    );
  }

}

class MyHomePage extends StatelessWidget {
  final String title;

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

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
      ),
      body: new Center(
        child: new Container(
          //获取主题accentColor
          color: Theme
              .of(context)
              .accentColor,
          child: new Text(
            '带背景颜色的组件这个是',
            style: Theme
                .of(context)
                .textTheme
                .title,
          ),
        ),
      ),
      floatingActionButton:
      new Theme(data: Theme.of(context).
      copyWith(accentColor: Colors.blue),
          child: new FloatingActionButton(onPressed: null,
            child: new Icon(Icons.wifi_lock),)),
    );
  }

}

然后我进行了导包然后出现了个错误就是我的模拟器按钮不见了这就很蛋疼了。然后重新新建一个以后就有了也不知道是哪里设置的问题。

Flutter导包不用自己造轮子
首先我们需要导入的是这个包于是我们可以在

import 'package:url_launcher/url_launcher.dart';

pubspec.yaml中新增一个
url_launcher: ^5.0.2

然后在main.dart中修改代码

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appName = '自定义主题';

    return new MaterialApp(
      title: appName,
      theme: new ThemeData(
        brightness: Brightness.dark, //应用整体亮度
        primaryColor: Colors.lightGreen[600], //app主要背景颜色
        accentColor: Colors.orange[600], //前景色
      ),
      home: new MyHomePage(
        title: appName,
      ),
    );
  }

}

class MyHomePage extends StatelessWidget {
  final String title;

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

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: '使用联网包',
      home: new Scaffold(
        appBar: new AppBar(
          title: new AppBar(
            title: new Text('使用联网包案例'),
          ),
        ),
        body: new Center(
          child: new RaisedButton(onPressed: ()
          {
            //发起指定url请求
            const url = "https://www.baidu.com";
            launch(url);
          },
            child: new Text('点击跳转到百度'),
          ),
        ),
      ),
    );
  }


}