flutter使用svg图标

https://segmentfault.com/a/1190000015132238?utm_source=index-hottest

本文详细讲述怎样在flutter项目中使用svg图标。使得读者能够按照本文的操作步骤顺利的在项目中实践。

升级flutter

由于环境中的flutter是0.3.2beta版本,在运行项目的时候出现了提示:需要使用

flutter upgrade

命令来升级flutter

然而出现了这么个错误:

升级

貌似是网络导致的,没有办法,只能重新下一个官方的

由于环境是mac,所以下载mac版本

https://storage.googleapis.co...

下载完毕之后解压缩替换原来的flutter路径就好了。

使用flutter_svg

前言

特意去google了一下,找到这两篇issue

https://github.com/flutter/fl...
https://github.com/flutter/fl...

意思是flutter官方不准备提供svg的全部支持,所以现在是社区有人在维护。

github:https://github.com/dnfield/fl...

新建项目

flutter create flutter_myapp

新增依赖

pubspec.yaml新增:

flutter_svg: ^0.3.2

把svg文件添加到资源中

我们可以去http://www.iconfont.cn/ 找一些svg

svg文件需要全部放在项目根目录的资源文件夹中,文件夹的名称我们可以使用约定,这里选择使用assets。

编辑pubspec.yaml,把上述svg资源全部新增到资源项。

  assets:
    - assets/close.svg
    - assets/set.svg
    - assets/warning.svg
    - assets/wrong.svg

于是我们可以这么来用:

SvgPicture close = new SvgPicture.asset(
      "assets/close.svg",
      color: Colors.grey,
    );

编辑main.dart


import 'package:flutter/material.dart';

import 'package:flutter_svg/flutter_svg.dart';

void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { SvgPicture close = new SvgPicture.asset( "assets/close.svg", color: Colors.grey, ); SvgPicture set = new SvgPicture.asset("assets/set.svg", color: Colors.redAccent); SvgPicture warning = new SvgPicture.asset("assets/warning.svg", color: Colors.blueAccent); SvgPicture wrong = new SvgPicture.asset("assets/wrong.svg", color: Colors.greenAccent); return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Column( children: <Widget>[ new Row( children: <Widget>[ new SizedBox( width: 50.0, height: 50.0, child: close, ), new SizedBox( width: 50.0, height: 50.0, child: set, ), new SizedBox( width: 50.0, height: 50.0, child: warning, ), new SizedBox( width: 50.0, height: 50.0, child: wrong, ), ], ) ], ), // This trailing comma makes auto-formatting nicer for build methods. ); } } 

效果:

代码:
https://github.com/jzoom/flut...

如有疑问,请加qq群854192563讨论

猜你喜欢

转载自www.cnblogs.com/sundaysme/p/12624211.html