Zenn
🌐

Flutter Webでポートフォリオページ作ってみた

2021/09/12に公開
Firebase
Flutter
Web
tech

1. 作った理由

  • 自分のプログラミングのレベルを紹介するものが何もなかった（汗）から。
  • 既存のポートフォリオ作成サービスで作った方が綺麗に作れるだろうけど、せっかくflutterでウェブページが作れるので試してみたかった。

サイトのリンク：
https://nasubi-portfolio.web.app/#/

2. 主な使用技術

  • Flutter for Web
  • Firebase Hosting

3. 設計

Figmaでレイアウトをざっくり決めてからコード作成に入った。

見直してみると本当にざっくり〜。

4. 使用したライブラリ

①url_launcher: ^6.0.10
：GitHubや技術記事のリンクへ移動できるようにするのに使用。

②dots_indicator: ^2.0.0
：ページビューのインジケータとして使用。

③firebase_core: ^1.6.0
：Firebase hostingでデプロイするのに使用。

5. このウェブアプリを作る上でのポイント

  • ネタ（紹介するコードや記事）が増えたときに、なるべく修正する箇所を少なくする。
    　→ リンクと画像のurlを記入するだけで投稿可能な形にできた！

  • デバイスレスポンシブにする
    　→ Safari / Chrom / iPhone12のシミュレータで確認したところ、うまく画面が切り替わってくれた。

つまづいた点

  • PageViewの描画範囲
    　→ PageViewを使う際に、あらかじめ描画範囲を指定しないとエラーが出る。
    　　以下のように、子にPageViewが含まれるColumnを作ってしまった場合、
    "A RenderFlex overflowed…"のエラーが出る。

    Column(
  children: [
      height: 550.0,
      width: 350.0,
      child: PageView.builder(
          controller:
              PageController(initialPage: 0, viewportFraction: 0.9),
          itemCount: myAppList.length,
          itemBuilder: (BuildContext context, int index) {
            return myAppForPhone(
                myAppList: myAppList,
                deviceHeight: deviceHeight,
                deviceWidth: deviceWidth,
                index: index);
          }),
  ],
),

    PageViewをサイズ指定したContainerで囲うとうまくいった！

    Column(
  children: [
    Container(
      ///PageViewの描画範囲を決めておく（これがないとrenderErrorになる）
      height: 550.0,
      width: 350.0,
      child: PageView.builder(
          controller:
              PageController(initialPage: 0, viewportFraction: 0.9),
          itemCount: myAppList.length,
          itemBuilder: (BuildContext context, int index) {
            return myAppForPhone(
                myAppList: myAppList,
                deviceHeight: deviceHeight,
                deviceWidth: deviceWidth,
                index: index);
          }),
    ),
  ],
),

  • リストの扱い
    　→ なるべく型を書くようにする。

感想

デザインとかはともかく（笑）flutterで自分のポートフォリオサイトのようなものが作れた。
今は他のリンクに飛ばす簡単なページにしたけれど、管理者ページを追加したりして使いやすいようにしていきたい。

Discussion