markdownパッケージを作成しました٩( 'ω' )و

Flutter webでブログを作った

flutter webについ最近(昨日,一昨日レベル)ハマり、思い立って人生初ブログを作成しました。

meta情報とか全然いじれておらず不恰好ですが、ページを作っていく分にはとても楽しく、貴重なおやすみ２日分を潰しそうな勢いです。(　˙-˙　)

記事を作る上でmarkdownを使いたかった

ブログといえば記事！
記事といえばブログ！

せっかくだから気が向いたときの備忘録を書きしたためておくのは悪くないと思ったので、記事を投稿できるようにしました。

html形式とかstring to widgetみたいな書き方は嫌だったのでわたしはmarkdown packageを探し始めました。

Column(
  children: [
    Text("ブログを書くよ！", style TextStyle(fontSize: 96)),
    Text("今回はアニメの世界に飛び込んでみたよ！"),
  ],
),

ちょっと肌に合わない既存パッケージ達

そりゃそうだ。開発者さん方もブログ用途なんて想定していないだろう。

それでも改行が全然効かなかったり、ちょっとしたズレ、みづらさが気になってそのまま使う気にはなれなかった。

ブログを開発した直後のテンションのままパッケージ開発へ

それは深夜２時、、

丸一日使って開発していたので疲労困憊な肉体に対して、

精神はとても元気だった！

開発イメージが湧き出て覚醒を抑えられず頭痛を抱えてベッドでうずくまる中、
覚悟を決めてパッケージを開発し始めて気づけば7時！

一区切りついたので外でトンカツを食べてきました。
おいしかったです。

開発したパッケージがこちら

まだめちゃくちゃ途中だけど僕のブログでは使えるようにはなったのでリリースしちゃいました( ^ω^ )

使用例画像右下

パッケージの使い方

一番シンプルな使い方はコレ

import 'package:custom_markdown/custom_markdown.dart';

final String text = """
# hello world
1. importして
2. text用意して
３. Markdownのbodyプロパティに突っ込むだけ
""";

//　母体widgetは自分で用意してね！
Markdown(
　　body: text,
);

とても簡単！
これだけでもスペースとかはある程度取るようになっている

けどまぁみやすいかというとまだまだ。

style指定について

Markdownにはstyleプロパティが生えておりMarkdownStyleを受け付けます。

Markdown(
  body: text,
  style: MarkdownStyle(),
);

MarkdownStyleには

• TextTheme
• headlineのstyle指定
• codeのstyle指定
• aタグのgesture指定

などなどが生えております。

例えばこんな感じで使うことを想定しております

final style = MarkdownStyle(
        fontFamily: fonts.raleway,
        downSizeHeadline: true,
        fontSizeDelta: 0.8,
        fontColor: colors.bright10,
        bodyText1: TextStyle(fontSize: 16, color: colors.bright10),
        codeStyle: MarkdownCodeStyle(
          backgroundColor: colors.absoluteBright0,
          fontStyle: textTheme.button?.apply(color: colors.absoluteBright90),
          padding: EdgeInsets.all(30),
        ),
        imageStyle: MarkdownImageStyle(
          crossAxisAlignment: CrossAxisAlignment.center,
          imageBuilder: (child) {
            return Center(
              child: FractionallySizedBox(
                widthFactor: 0.6,
                child: child,
              ),
            );
          },
          captionBuilder: (caption) {
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                caption,
                style: textTheme.button,
              ),
            );
          },
        ),
        headlineDecoration: MarkdownHeadlineDecoration(
          decorationBuilder: (child, headlineType) {
            if (headlineType == HeadlineType.H1) {
              return Padding(
                padding: const EdgeInsets.fromLTRB(0, 30, 0, 0),
                child: child,
              );
            }
            return Container(
              child: Align(
                alignment: Alignment.centerLeft,
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(16, 9, 16, 12),
                  child: child,
                ),
              ),
              color: colors.materialBlue.withOpacity(0.4),
            );
          },
        ),
      );

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

Markdown(
  body: text,
  style: style),
);

ブログで利用しているstyle指定そのままです。(雑 (照

styleの中でクラスがいくつも入れ子になっててめんどくさいかもしれんなぁ、とも思いながら

使い回すならこうするのがよいだろうという思いのもとこんな感じになっております。

開発について

flutter nativeに比べてflutter webはまだまだ様子見って人が多いんじゃないかと僕は感じているのですが、
もしflutter webがもっと使われるようになったらmarkdownパーサが今よりもっと使われるのでは！と思っております( ・∇・)

ぜひstarとlikeをお願いします( ・∇・)

github: https://github.com/airy-swift/custom_markdown
pub: https://pub.dev/packages/custom_markdown

まだまだtableに対応していなかったりcode blockはコピーできるボタン設置したいなぁとかやりたいことやるべきこと山積みです。

現状はシンプルな実装なので読みにくくはないと思っています (？
prもissueも投げてくれるととても嬉しいです＼＼\\٩( 'ω' )و //／／