IT備忘録帳 – ITMemoNote @kuwabara :)

● Threbo

リアルタイムで更新されていく電子掲示板アプリ

・ Google Play Store :

https://play.google.com/store/apps/details?id=daichi.kuwabara.threbo

・App Store :

https://apps.apple.com/us/app/threbo/id6444344855

● IdolBlog

アイドルがブログを書き、アイドル側は「ファンからのGood数」ファン側は「アイドルへのGood数」をランキング化するアプリ

・ Google Play Store :

https://play.google.com/store/apps/details?id=daichi.kuwabara.idolblog

・App Store :

https://apps.apple.com/us/app/アイドルブログ/id1610668157

Overview

ThreBo is thread board Application.

Platform

・Android 5.0以上

・iOS 9.0以上

License

http://kuwabara.xyz:52100/files/threbo/License/NOTICES

Term of service・privacy policy

I would like you to use this app as you like and enjoy it.

Please use only those can agree to the following at a minimum.

Prohibited matters

1. Use for criminal purposes
2. Use it to make someone feel uncomfortable

Notes

1.We would like to freely use the data and information entered by this app users, such as reflecting it on my own blog and analyzing the data.Please enter data within the range where there is no problem even if it is used.

2. This app is basically developed by one person, and there is a possibility that problems may occur that may cause inconvenience to everyone who this app uses it,
of that we may not be able to respond satisfactorily. Therefore, please be especially careful when billing or other money is generated, and only use it if you can tolerate whatever happens.

3.The contents of the terms of use may be changed depending on the future situation. Please note.

I’m sorry for my poor English.

Thank you for reading!

Please refer to the Japanese version (日本語) for more formal terms of use.

ThreBo!について

概要

ThreBo!とは、Thread Board Application!の略であり、電子掲示板特化型アプリケーションである。

対応プラットフォーム

・Android 5.0以上

・iOS 9.0以上

ライセンスについて

ライセンス情報については、以下URLで確認可能
http://kuwabara.xyz:52100/files/threbo/License/NOTICES

利用規約・プライバシーポリシー

このアプリは、ご利用くださる皆様のお好きな様に使っていただき、楽しんでいただきたく考えております。最低限以下の項目に同意いただける方のみご利用ください。

禁止事項

1. 犯罪を目的として利用すること
2.相手に不快な思いをさせるために利用すること

注意事項

1.ご利用くださる皆様に入力いただいたデータ・情報等は、こちら側でブログへの反映やデータ解析等、自由に利用させていただきたく考えておりますので、入力するデータは利用されても問題のない範囲内でお願いします。

2.IdolBlogアプリは基本1人で開発をしており、ご利用くださる皆様にご迷惑をおかけするような不具合等が発生したり、満足な対応をすることができない可能性がございます。そのため、課金等お金が発生する場合は特にご注意いただき、どのようなことが発生しても許容できる方のみご利用ください。

3.利用規約の内容は、今後の状況により変更する場合がございます。あらかじめご了承ください。

IdolBlogアプリについて

概要

IdolBlogとは、アイドルがブログを書き、アイドル側は「ファンからのGood数」ファン側は「アイドルへのGood数」をランキング化するアプリです。

対応プラットフォーム

・Android 5.0以上

・iOS 9.3以上

リリース日

2022年3月30日

ライセンスについて

ライセンス情報については、以下URLで確認可能
http://kuwabara.xyz:52100/files/idolblog/License/NOTICES

利用規約・プライバシーポリシー

IdolBlogアプリは、ご利用くださる皆様のお好きな様に使っていただき、楽しんでいただきたく考えております。最低限以下の項目に同意いただける方のみご利用ください。

禁止事項

1. 犯罪を目的として利用すること
2.交流相手に不快な思いをさせるために利用すること

注意事項

1.ご利用くださる皆様に入力いただいたデータ・情報等は、こちら側でデータ解析等、自由に利用させていただきたく考えておりますので、入力するデータは利用されても問題のない範囲内でお願いします。

Flutter TabBar

本ドキュメントでは、FlutterのNavigationBarについて記述する。

TabBarとは、画面の上にあるバーのことで、各文字列をタップすると、そのアイコンに関連した画面が表示される（以下例だと、Bの文字列をタップしたら、Bと表示されている画面が表示される）

以下に実装を示す。importパッケージはflutterのみ。

import 'package:flutter/material.dart';

class KwTabView extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _KwTabView();
  }
}

class _KwTabView extends State<KwTabView> with SingleTickerProviderStateMixin {
  final bool _mIsRebuildBody = true;
  List<String> _mTabList = ['A', 'B', 'C'];
  List<Widget> _mTabBodyWidgetList = [
    _TmpBodyWidget('A'),
    _TmpBodyWidget('B'),
    _TmpBodyWidget('C'),
  ];
  TabController _mTabController;
  int _mTabIndex = 0;

  @override
  void initState() {
    _mTabController = TabController(
        initialIndex: _mTabIndex, length: _mTabList.length, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Tab View'),
        bottom: TabBar(
          controller: _mTabController,
          tabs: _mTabList.map((String tabText) {
            return Tab(text: tabText);
          }).toList(),
          onTap: (int index) {
            setState(() {
              _mTabIndex = index;
            });
          },
        ),
      ),
      body: _mIsRebuildBody == true
          ? _mTabBodyWidgetList[_mTabIndex]
          : IndexedStack(
              index: _mTabIndex,
              children: _mTabBodyWidgetList,
            ),
    );
  }
}

class _TmpBodyWidget extends StatelessWidget {
  final String _mLabel;

  _TmpBodyWidget(this._mLabel);

  @override
  Widget build(BuildContext context) {
    print("_TmpBodyWidget build $_mLabel");
    return Scaffold(
      body: Center(
        child: Text(
          _mLabel,
          style: TextStyle(fontSize: 120),
        ),
      ),
    );
  }
}

Flutter NavigationBar

本ドキュメントでは、FlutterのNavigationBarについて記述する。

NavigationBarとは、画面の下にあるバーのことで、各アイコンをタップすると、そのアイコンに関連した画面が表示される（以下例だと、Bのアイコンをタップしたら、Bと表示されている画面が表示される）

以下に実装を示す。importパッケージはflutterのみ。

import 'package:flutter/material.dart';

class KwNavigationView extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _KwNavigationView();
  }
}

class _KwNavigationView extends State<KwNavigationView> with SingleTickerProviderStateMixin {
  final bool _mIsRebuildBody = false;
  List<String> _mNavigationLabelList = ['A', 'B', 'C'];
  List<IconData> _mNavigationIconList = [
    Icons.home_rounded,
    Icons.chat_bubble_rounded,
    Icons.settings_rounded,
  ];
  List<BottomNavigationBarItem> _mNavigationBarItemList;

  List<Widget> _mNavigationBodyWidgetList = [
    _TmpBodyWidget('A'),
    _TmpBodyWidget('B'),
    _TmpBodyWidget('C'),
  ];
  int _mNavigationIndex = 0;

  @override
  void initState() {
    _mNavigationBarItemList = List();
    for (int i = 0; i < _mNavigationLabelList.length; i++) {
      _mNavigationBarItemList.add(_getNavigationBarItem(i));
    }
    super.initState();
  }

  BottomNavigationBarItem _getNavigationBarItem(int index) {
    return BottomNavigationBarItem(
      icon: Icon(_mNavigationIconList[index]),
      label: _mNavigationLabelList[index],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Navigation View'),
      ),
      body: _mIsRebuildBody == true
          ? _mNavigationBodyWidgetList[_mNavigationIndex]
          : IndexedStack(
              index: _mNavigationIndex,
              children: _mNavigationBodyWidgetList,
            ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items:_mNavigationBarItemList,
        currentIndex: _mNavigationIndex,
        onTap: (int index) {
          setState(() {
            _mNavigationIndex = index;
          });
        }
      ),
    );
  }
}

class _TmpBodyWidget extends StatelessWidget {
  final String _mLabel;

  _TmpBodyWidget(this._mLabel);

  @override
  Widget build(BuildContext context) {
    print("_TmpBodyWidget build $_mLabel");
    return Scaffold(
      body: Center(
        child: Text(
          _mLabel,
          style: TextStyle(fontSize: 120),
        ),
      ),
    );
  }
}

Flutter TextField

本ドキュメントでは、FlutterのTextFieldについて記述する。

以降の内容は、上記TextField一覧図の各TextField取得関数についてまとめる。

TextField

Widget getTextField() {
  TextEditingController tmpTextEditingController =
      TextEditingController(text: 'TextField Controller');
  return TextField(
    controller: tmpTextEditingController,
    decoration: InputDecoration(
      hintText: 'TextField(Hint)',
    ),
    onChanged: (String text) {},
  );
}

TextField Decoration Hint

Widget getTextFieldDecorationHint() {
  return TextField(
    decoration: InputDecoration(
      hintText: 'TextField Decoration Hint',
    ),
    onChanged: (String text) {},
  );
}

TextField Decoration Label

Widget getTextFieldDecorationLabel() {
  return TextField(
    decoration: InputDecoration(
      labelText: 'TextField Decoration Label',
    ),
    onChanged: (String text) {},
  );
}

TextField Decoration Label In Text

Widget getTextFieldDecorationLabelInText() {
  TextEditingController tmpTextEditingController =
      TextEditingController(text: 'In Text');
  return TextField(
    controller: tmpTextEditingController,
    decoration: InputDecoration(
      labelText: 'TextField Decoration Label',
    ),
    onChanged: (String text) {},
  );
}

TextField Decoration Error

Widget getTextFieldDecorationError() {
  return TextField(
    decoration: InputDecoration(
      errorText: 'TextField Decoration Error',
    ),
    onChanged: (String text) {},
  );
}

TextField Decoration Border (外枠)

Widget getTextFieldDecorationBorder() {
  return TextField(
    decoration: InputDecoration(
      hintText: 'TextField Decoration Border',
      border: OutlineInputBorder(),
    ),
    onChanged: (String text) {},
  );
}

TextField Decoration Border In Label

Widget getTextFieldDecorationBorderInLabel() {
  TextEditingController tmpTextEditingController =
  TextEditingController(text: 'TextField Decoration Border');
  return TextField(
    decoration: InputDecoration(
      labelText: ' In Label',
      border: OutlineInputBorder(),
    ),
    controller: tmpTextEditingController,
    onChanged: (String text) {},
  );
}

TextField MaxLine (最大行数)

Widget getTextFieldMaxLine() {
  TextEditingController tmpTextEditingController =
  TextEditingController(text: 'TextField MaxLine 1\nTextField MaxLine 2\nTextField MaxLine 3\n');
  return TextField(
    controller: tmpTextEditingController,
    maxLines: 2,
    onChanged: (String text) {},
  );
}

TextField KeyboardType Multiline (自動改行)

Widget getTextFieldKeyboardTypeMultiline() {
  TextEditingController tmpTextEditingController =
  TextEditingController(text: 'TextField Keyboard Type Multiline 1\nTextField Keyboard Type Multiline 2');
  return TextField(
    keyboardType: TextInputType.multiline,
    maxLines: null,
    controller: tmpTextEditingController,
    onChanged: (String text) {},
  );
}

TextField TextCapitalization Characters (大文字入力)

Widget getTextFieldTextCapitalizationCharacters() {
  TextEditingController tmpTextEditingController =
  TextEditingController(text: 'TEXTFIELD CAPITALIZATION CHARACTERS');
  return TextField(
    textCapitalization: TextCapitalization.characters,
    controller: tmpTextEditingController,
    onChanged: (String text) {},
  );
}

その他

以下UIに反映されないため、TextField一覧図に表示されていない項目

TextField InputFormatter (半角英数字のみ許容)

Widget getTextFieldInputFormatter() {
  return TextField(
    inputFormatters: <TextInputFormatter>[
      FilteringTextInputFormatter.allow(RegExp(r'^[0-9a-zA-Z@_.-]+$')),
    ],
    decoration: InputDecoration(
      hintText: 'TextField InputFormatter',
    ),
    onChanged: (String text) {},
  );
}

TextField (フォーカス指定)

Widget getTextFieldFocusNode() {
  FocusNode tmpFocusNode = FocusNode();
  return TextField(
    focusNode: tmpFocusNode,
    decoration: InputDecoration(
      hintText: 'TextField FocusNode',
    ),
    onChanged: (String text) {},
  );
}

FocusNode.requestFocus()メソッドにて、対象のTextFieldにフォーカスを当てる。

Flutter Text

本ドキュメントでは、FlutterのTextについて記述する。
Textは以下2種類
・文字列をそのまま表示する「Text」
・文字列を区切って表示する「RichText」

以降の内容は、上記Text一覧図の各Text取得関数についてまとめる。

Text

Widget getText() {
  return Text('Text');
}

RichText

Widget getRichText() {
  return RichText(
    text: TextSpan(
      style: TextStyle(color: Colors.black),
      children: [
        TextSpan(text: 'Ri'),
        TextSpan(
            text: 'chTe',
            style: TextStyle(color: Colors.blue),
            recognizer: TapGestureRecognizer()
              ..onTap = () {
                // chTeをタップしたときの動作実装
              }),
        TextSpan(text: 'xt'),
      ],
    ),
  );
}

Text Style FontSize

Widget getTextStyleFontSize() {
  return Text(
    'Text Style FontSize',
    style: TextStyle(fontSize: 20),
  );
}

Text Style Color

Widget getTextStyleColor() {
  return Text(
    'Text Style Color',
    style: TextStyle(color: Colors.blue),
  );
}

Text Style Bold

Widget getTextStyleBold() {
  return Text(
    'Text Style Bold',
    style: TextStyle(fontWeight: FontWeight.bold),
  );
}

Text Style Align

Widget getTextAlign() {
  return Container(
    constraints: BoxConstraints(
      minWidth: double.infinity,
    ),
    child: Text(
      'Text Align',
      textAlign: TextAlign.right,
    ),
  );
}

通常Textは文字サイズ分しか幅を確保しないが、以下のように文字サイズ分以上の幅を指定した場合、その幅の中でどの位置に文字を表示するかをAlineにてできる。

Text Style Overflow Default

Widget getTextStyleOverflowDefault() {
  return Container(
    constraints: BoxConstraints(
      maxWidth: 200,
    ),
    child: Text(
      'Text Overflow Default 1 2 3 4 5 6 7 8 9 0',
      // overflow: TextOverflow.clip, // デフォルト
    ),
  );
}

Text Style Overflow Ellipsis

Widget getTextStyleOverflowEllipsis() {
  return Container(
    constraints: BoxConstraints(
      maxWidth: 200,
    ),
    child: Text(
      'Text Overflow Ellipsis 1 2 3 4 5 6 7 8 9 0',
      overflow: TextOverflow.ellipsis,
    ),
  );
}

Text Style MaxLine

Widget getTextMaxLine() {
  return Text(
    'Text MaxLine 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0',
    maxLines: 2,
  );
}

Flutter Row

本ドキュメントでは、FlutterのRowについて記述する。

Rowは、子Widgetを左から右方向に順に表示するWidgetである。

以降の内容は、上記Row一覧図の各Row取得関数についてまとめるが、各関数の中で呼ばれる共通関数を先に定義する。

共通関数

● 子Widget ベース

Widget _getChildBase(String text, Color color) {
  return Container(
    color: color,
    child: Text(
      text,
      style: TextStyle(color: Colors.white),
    ),
  );
}

● Child Red (赤色Widget)

Widget _getChildRed() {
  return _getChildBase('Child Red', Colors.red);
}

● Child Green (緑色Widget)

Widget _getChildGreen() {
  return _getChildBase('Child Green', Colors.green);
}

● Child Blue(青色Widget)

Widget _getChildBlue() {
  return _getChildBase('Child Blue', Colors.blue);
}

● Child Expanded (黒色Widget)

Widget _getChildExpanded() {
  return _getChildBase('Child Expanded', Colors.black);
}

Row

Widget _getRow() {
  return Container(
    color: Colors.grey,
    child: Row(
      children: [
        _getChildRed(),
        _getChildGreen(),
        _getChildBlue(),
      ],
    ),
  );
}

※Row領域は灰色で表示

Row Parent Width And Height (親Widget縦横幅指定)

Widget _getRowParentWidthAndHeight() {
  return Container(
    color: Colors.grey,
    constraints: BoxConstraints(
      minWidth: double.infinity,
      minHeight: 80,
    ),
    child: Row(
      children: [
        _getChildRed(),
        _getChildGreen(),
        _getChildBlue(),
      ],
    ),
  );
}

親Widgetの縦横幅を指定すると、Rowはそのサイズに合わせる。
子Widgetの表示位置は、左から左揃えとなる。

Row MainAxisAligment (配置：左・中・右)

Widget _getRowMainAxisAlignment() {
  return Container(
    color: Colors.grey,
    constraints: BoxConstraints(
      minWidth: double.infinity,
      minHeight: 80,
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        _getChildRed(),
        _getChildGreen(),
        _getChildBlue(),
      ],
    ),
  );
}

左を指定：MainAxisAlignment.start
中を指定：MainAxisAlignment.center
右を指定：MainAxisAlignment.end

Row CrossAxisAlignment (配置：上・中・下)

Widget _getRowCrossAxisAlignment() {
  return Container(
    color: Colors.grey,
    constraints: BoxConstraints(
      minWidth: double.infinity,
      minHeight: 80,
    ),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        _getChildRed(),
        _getChildGreen(),
        _getChildBlue(),
      ],
    ),
  );
}

上を指定：CrossAxisAlignment.start
中を指定：CrossAxisAlignment.center
下を指定：CrossAxisAlignment.end

Row Expanded (余白領域)

Widget _getRowExpanded() {
  return Container(
    color: Colors.grey,
    height: 80,
    constraints: BoxConstraints(
      minWidth: double.infinity,
      minHeight: 80,
    ),
    child: Row(
      children: [
        _getChildRed(),
        _getChildGreen(),
        _getChildBlue(),
        Expanded(
          child: _getChildExpanded(),
        ),
      ],
    ),
  );
}

Flutter Column

本ドキュメントでは、FlutterのColumnについて記述する。

Columnは、子Widgetを上から下方向に順に表示するWidgetである。

以降の内容は、上記Column一覧図の各Column取得関数についてまとめるが、各関数の中で呼ばれる共通関数を先に定義する。

共通関数

● 子Widget ベース

Widget _getChildBase(String text, Color color) {
  return Container(
    color: color,
    child: Text(
      text,
      style: TextStyle(color: Colors.white),
    ),
  );
}

● Child Red (赤色Widget)

Widget _getChildRed() {
  return _getChildBase('Child Red', Colors.red);
}

● Child Green (緑色Widget)

Widget _getChildGreen() {
  return _getChildBase('Child Green', Colors.green);
}

● Child Blue(青色Widget)

Widget _getChildBlue() {
  return _getChildBase('Child Blue', Colors.blue);
}

● Child Expanded (黒色Widget)

Widget _getChildExpanded() {
  return _getChildBase('Child Expanded', Colors.black);
}

Column

Widget _getColumn() {
  return Container(
    color: Colors.grey,
    child: Column(
      children: [
        _getChildRed(),
        _getChildGreen(),
        _getChildBlue(),
      ],
    ),
  );
}

デフォルトのColumnでは、幅は一番大きい子Widgetの長さとなる
※Column領域は灰色で表示

Column Parent Width And Height (親Widget縦横幅指定)

Widget _getColumnParentWidthAndHeight() {
  return Container(
    color: Colors.grey,
    constraints: BoxConstraints(
      minWidth: double.infinity,
      minHeight: 80,
    ),
    child: Column(
      children: [
        _getChildRed(),
        _getChildGreen(),
        _getChildBlue(),
      ],
    ),
  );
}

親Widgetの縦横幅を指定すると、Columnはそのサイズに合わせる。
子Widgetの表示位置は、上から中央揃えとなる。

Column MainAxisAligment (配置：上・中・下)

Widget _getColumnMainAxisAlignment() {
  return Container(
    color: Colors.grey,
    constraints: BoxConstraints(
      minWidth: double.infinity,
      minHeight: 80,
    ),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        _getChildRed(),
        _getChildGreen(),
        _getChildBlue(),
      ],
    ),
  );
}

上を指定：MainAxisAlignment.start
中を指定：MainAxisAlignment.center
下を指定：MainAxisAlignment.end

Column CrossAxisAlignment (配置：左・中・右)

Widget _getColumnCrossAxisAlignment() {
  return Container(
    color: Colors.grey,
    constraints: BoxConstraints(
      minWidth: double.infinity,
      minHeight: 80,
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        _getChildRed(),
        _getChildGreen(),
        _getChildBlue(),
      ],
    ),
  );
}

左を指定：CrossAxisAlignment.start
中を指定：CrossAxisAlignment.center
右を指定：CrossAxisAlignment.end

Column Expanded (余白領域)

// Expandedの場合、高さを明示的に指定する必要がある
Widget _getColumnExpanded() {
  return Container(
    color: Colors.grey,
    height: 80,
    constraints: BoxConstraints(
      minWidth: double.infinity,
      minHeight: 80,
    ),
    child: Column(
      children: [
        _getChildRed(),
        _getChildGreen(),
        _getChildBlue(),
        Expanded(
          child: _getChildExpanded(),
        ),
      ],
    ),
  );
}

Expanded()を利用すると、余白領域で表示する。
※この余白領域がどのくらいかは、高さを明示的に指定する必要がある。
（高さを指定しないと、どのくらいの幅が余白領域なのか判定できない）

● Threbo

● IdolBlog

Overview

Platform

License

Term of service・privacy policy

概要

対応プラットフォーム

ライセンス について

利用規約・プライバシーポリシー

概要

対応プラットフォーム

リリース日

ライセンス について

利用規約・プライバシーポリシー

TextField

TextField Decoration Hint

TextField Decoration Label

TextField Decoration Label In Text

TextField Decoration Error

TextField Decoration Border (外枠)

TextField Decoration Border In Label

TextField MaxLine (最大行数)

TextField KeyboardType Multiline (自動改行)

TextField TextCapitalization Characters (大文字入力)

その他

TextField InputFormatter (半角英数字のみ許容)

TextField (フォーカス指定)

Text

RichText

Text Style FontSize

Text Style Color

Text Style Bold

Text Style Align

Text Style Overflow Default

Text Style Overflow Ellipsis

Text Style MaxLine

共通関数

Row

Row Parent Width And Height (親Widget縦横幅指定)

Row MainAxisAligment (配置：左・中・右)

Row CrossAxisAlignment (配置：上・中・下)

Row Expanded (余白領域)

共通関数

Column

Column Parent Width And Height (親Widget縦横幅指定)

Column MainAxisAligment (配置：上・中・下)

Column CrossAxisAlignment (配置：左・中・右)

Column Expanded (余白領域)

ライセンスについて

ライセンスについて