🧅

Flutterでsvgを使ってみた!

2024/01/18に公開

Flutter

Dart

SVG

tech

読んでほしい人

Flutterでsvg画像を使ってみたい人!
svgなるものに興味がある人

補足情報

https://pub.dev/packages/flutter_svg
公式を見てみたけど、やり方が書いてない???

Githubのレポジトリを見てみると、assetsディレクトリを作成して、そこから読み込めば良いみたい???

ここにsvgを配置する

私はこちらのサイトで画像をダウンロードしてきました。
https://www.svgrepo.com/

onionって画像を検索して見つけたのでこちらをダウンロードしました。トマトでも良いですよ笑

名前が長いから、onionとか短いのに変えた方が良さそう。

assetsディレクトリにsvg画像を配置して、pubspec.yamlの設定をする。

記事の内容

公式のコードがそのまま使えば良いみたいだが、そもそも変数は、Columnとかの中に書けない???
buildメソッドの下の方に、変数を定義すれば良いのでしょうけど、今回は直接svg画像がある場所をパスで指定しました。

公式の解説のコード:

final String assetName = 'assets/image.svg';
final Widget svg = SvgPicture.asset(
  assetName,
  semanticsLabel: 'Acme Logo'
);

完成品:

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const SvgView(),
    );
  }
}

class SvgView extends StatelessWidget {
  const SvgView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SVG'),
      ),
      body: Center(
        child: SvgPicture.asset(
          'assets/onion.svg',
        ),
        ),
    );
  }
}

こんな感じで、onionの画像が表示されました!

最後に

今回は、Flutterでsvg画像を表示してみました!
可愛いイラストの画像がたくさんあるので、使ってみたい人がいたら試してみてください💙💚💛

歴史とかどんなものか知りたい人はこのサイトをみてください。

サイトの解説を引用:
SVGファイルとは、「Scalable Vector Graphics」の略称で、テキストベースのベクター形式で、ウェブサイトやアプリケーションで使用される画像形式です。

拡張子は、「.svg」と表示されます。

画像を拡大縮小しても画質が劣化せず、自由にカスタマイズできるため、Webデザイナーに人気があります。

読んでほしい人

補足情報

記事の内容

最後に

Discussion