The icons or graphics make an application more interactive because users get a rough idea of features of application by just seeing the icon and not reading the text corresponding to the icon. You should use more graphics if your user base is not so literate because the pictorial representations convey a better message to the users.
So, if you are creating a mobile application with the help of icons. Then you have to support multiple resolutions icons that are sometimes a nightmare to developers. We have to create different mobile sizes icons in mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, x, 2x, 3x and so on. This will increase the size of your app.
The solution is Vector Graphics such as SVG images. Which allows designers and developers to have more flexibility providing them scalable resources. The SVG files describe the path in which a drawable can be rendered at runtime inside the app. Instead of having several packaged images for each DPI resolution that the app supports, you have a single and small text file with the path of the image.
In this post, we'll talk about SVG file handling and drawing in a Flutter application. To use SVG file, we have to use a Dart-native rendering library flutter_svg plugin.
Steps to use SVG in Flutter Application.
1. First of all, add the flutter_svg plugin in subspec.yaml as dependancy.
2. Now, put all the SVG files in a folder. You can create a folder and name it assets.
3. To use any file in Flutter application. We have to define it in subspec.yaml. So, define all SVG files that you want to use as we have defined below:
assets:
- assets/icEmail.svg
- assets/icFacebook.svg
- assets/icPassword.svg
- assets/icReferralUsername.svg
- assets/icScreenName.svg
4. After that, you can render SVG file in a Flutter application with help of below code snippet:
String assetName = 'assets/icEmail.svg';
Widget svg = new SvgPicture.asset(
assetName,
);
5. The flutter_svg plugin provides us the ability to change the color of any SVG file at run time. Such as
String assetName = 'assets/icEmail.svg';
Widget svgIcon = new SvgPicture.asset(
assetName,
color: Colors.red,
);
Draw SVG file from the network.
You can draw a SVG file from network url.
SvgPicture.network(
'https://upload.wikimedia.org/wikipedia/commons/b/b4/Chess_ndd45.svg',
placeholderBuilder: (BuildContext context) => Container(
padding: const EdgeInsets.all(30.0),
child: const CircularProgressIndicator()),
),
Draw a png as a svg file from the network.
You can draw a png file as a svg file from network url.
SvgPicture.string('''<svg viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxDFT1SjWXEKaGWR1tIMLya9oBIhcl0BfaxO2SH7r1SIRWF85pbLf4wMtKifzGFmbhdiECB5o5uyNsYIIBJ2C2switspvhJvLvodHzgXkzpkf5zPOSfzB2zDVqts3SvezriempXDhDtS0N/s1600/fevicn.png" height="100" width="100"/>
</svg>'''),
Here, you can see an example that we have designed by using SVG file. We have created a login screen page and we have used email, password and developerlibs logo icon.
You can try below code snippet for the above example:
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
void main() {
runApp(new MaterialApp(
debugShowCheckedModeBanner: false,
theme: new ThemeData(
primaryColor: const Color(0xFF02BB9F),
primaryColorDark: const Color(0xFF167F67),
accentColor: const Color(0xFF167F67),
),
home: new SignUpForm(),
));
}
class SignUpForm extends StatefulWidget {
@override
_FormState createState() => _FormState();
}
class _FormState extends State<SignUpForm> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text(
'SVG Login Form',
style: TextStyle(color: Colors.white),
),
),
body: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.all(10.0),
child: Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(15.0),
alignment: FractionalOffset.center,
decoration: BoxDecoration(
color: Colors.blueGrey,
borderRadius: BorderRadius.all(Radius.circular(10.0)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Color(0xFF696969),
offset: Offset(1.0, 6.0),
blurRadius: 0.001,
),
],
),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(20.0),
child: SvgPicture.string('''<svg viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxDFT1SjWXEKaGWR1tIMLya9oBIhcl0BfaxO2SH7r1SIRWF85pbLf4wMtKifzGFmbhdiECB5o5uyNsYIIBJ2C2switspvhJvLvodHzgXkzpkf5zPOSfzB2zDVqts3SvezriempXDhDtS0N/s1600/fevicn.png" height="100" width="100"/>
</svg>'''),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
SvgPicture.asset(
'assets/icEmail.svg',
color: Colors.white,
),
Expanded(
flex: 1,
child: Padding(
padding: EdgeInsets.only(left: 15.0),
child: TextField(
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
helperText: "Enter email")),
),
)
]),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
SvgPicture.asset(
'assets/icPassword.svg',
color: Colors.white,
),
Expanded(
flex: 1,
child: Padding(
padding: EdgeInsets.only(left: 15.0),
child: TextField(
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
helperText: "Enter Password")),
),
)
]),
Padding(
padding: const EdgeInsets.only(top: 20),
child: RaisedButton(
onPressed: subtractNumbers,
textColor: Colors.white,
color: Colors.red,
padding: const EdgeInsets.all(8.0),
child: new Text(
"Login",
),
),
),
],
))),
));
}
void subtractNumbers() {}
}
I have hope, now you have a basic idea to use SVG files in the Flutter Application. If you facing any issue, please ask it from the comment section below.
