Sage-Code Laboratory

Svg

Flutter tutorial by examples

How to insert svg artwork into widgets:
This is an svg example.
//svg example
  import 'package:flutter/material.dart';
  import 'package:flutter_svg/flutter_svg.dart';
  
  void main() => runApp(MyApp());
  
  /// This Widget is the main application widget.
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: MyContainerWidget(),
      );
    }
  }
  
  class MyContainerWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text("Flutter svg example"),
          ),
          body: Container(
            width: double.infinity,
            height: 150.0,
            color: Colors.orangeAccent,
            margin: EdgeInsets.all(25),
            padding: EdgeInsets.all(35),
            alignment: Alignment.center,
            //  transform: Matrix4.rotationZ(0.1),
            child: SvgPicture.asset(
              'assets/clip.svg',
              color: Colors.indigo,
            ),
          ),
        ),
      );
    }
  }
Responsive image   

Back to: Flutter index