広告

Flutterラボの

プレミアム会員になる

【Flutter】横軸が日付、縦軸が数字のグラフを作成する

2020.09.16

Flutterのパッケージを探すとカレンダーに関するものがたくさんありますが、それを使ってしまうとカスタマイズがしにくいのでコピペで使用できるグラフ作成のコードを紹介します。

完成形

画像1

手順

1. pubspec.yaml を編集して、パッケージを取得
2. main.dart をコピペ

コード

pubspec.yaml を編集して、『intl』パッケージを取得します。

dependencies:
flutter:
  sdk: flutter

cupertino_icons: ^0.1.3
intl: ^0.16.1 #この行を追加

編集したら、『Pub get』でパッケージを取得しましょう。

あとは以下のコードを『main.dart』にコピペするとグラフが完成します。

コピペ用コード(main.dart)

Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ 広告のECサイトを開発(https://ec-ad.tech/)