【Dart/Flutter開発】最初は気にならないけど、後から地味に調べるはめになること、の話

ヘッダーの「Debug」を消す
勝手に表示される「戻る」機能の非表示
Html&CssであったPadding
Html&Cssであったmax,min系統
画面いっぱいの横幅
TextのReadOnly

こんにちは、たちつてとです。

以下では、表題通り

開発初期ではあんまり気にならなかったけど、

結局調べることにしたことについて

箇条書きで書いていきます。

ヘッダーの「Debug」を消す

MaterialApp(
    debugShowCheckedModeBanner: false,// ←これ
    title: "かねのすけ",
    theme: ThemeData(
      primarySwatch: Colors.blueGrey, // タイトルみたいなのの背景色
      visualDensity: VisualDensity.adaptivePlatformDensity,
    ),
    home: DayMoneyState() //DayMoneyState()
    );

debugShowCheckedModeBannerという

プロパティをfalseにしておくと、

ヘッダーのリボン見たいな「Debug」が消えます。

勝手に表示される「戻る」機能の非表示

appBar: AppBar(
  automaticallyImplyLeading: false,
  title: なになに

自前の記述で画面遷移させるわって時、

見た目のとしても邪魔になったりします。

automaticallyImplyLeadingをfalseに。

Html&CssであったPadding

Padding(
    padding: EdgeInsets.all(10),
    child: なになに

Container(
    padding: EdgeInsets.all(10),
    child: なになに

「Padding」を利用しても、「Container」を利用しても

実装はできます。「all」は文字通り

上下左右同じだけ余白を作ります。

「symmetric」で

上下/左右の指定もできますし、

「fromLTRB」で

上/下/左/右もそれぞれ指定もできます。

left,top,right,bottomの頭文字ですね。

Container(
    margin: EdgeInsets.fromLTRB(0, 15, 0, 0),

ちなみに、marginも同様。

Html&Cssであったmax,min系統

Container(
    constraints: const BoxConstraints(
      minHeight: 40,
      maxWidth: 150,
    ),
    child: なになに

そのままです。

maxHeight、minWidthも指定可能です。

画面いっぱいの横幅

Container(
    width:MediaQuery.of(context).size.width,
    child:なになに

Htmlでいうwidth:100%とかの代替になるんですかね。

ちなみに×0.5とかで、画面サイズの50%とかになりますよ。

TextのReadOnly

TextField(
  controller: TextEditingController(
      text: 'アイウエオ'),
  style: TextStyle(fontSize: 16),
  textAlign: TextAlign.left,
  readOnly: true,//←Readonly本体
  onChanged: (name) {
    names[index] = name;
  },
  decoration: const InputDecoration(
    labelText: 'な',
    filled: true,
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(
          color: Colors.black, width: 1.0),
    ),
  ),
)