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('点击跳转到百度'),
          ),
        ),
      ),
    );
  }


}

最后导包出现了问题,那么解决的方法就是flutter upgrade升级到新的版本去然后就成功了不过还是依然得解决网速的问题。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

轻烟飘荡

我想吃甜筒

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

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

打赏作者

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

抵扣说明:

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

余额充值