Outlook: 上書きになってしまう！

Outlookで「上書き入力モード」を無効にし、「挿入モード」に変更するには、以下の手順を実行します：

「ファイル」タブを開く 「オプション」を選択 「メール」の「編集オプション」にアクセス 「詳細設定」をクリック 「上書き入力モードの切り替えにInsキーを使用する」と「上書き入力モードで入力する」のチェックを外す 「OK」で設定を保存

nikoText2 

Widget nikoText2({
  required TextEditingController ctler,
  required String label,
  required Function(String? newValue) fnc,
  bool? obscureText
}) {
  return TextFormField(
    obscureText: obscureText ?? false,
    controller: ctler,
    style: const TextStyle(
      fontSize: 20,
    ),
    onChanged: (String? newValue) => fnc(newValue),
    keyboardType: TextInputType.text,
    decoration: InputDecoration(
      isDense: true,
      border: const OutlineInputBorder(),
      filled: true, // fillColorで指定した色で塗り潰し
      fillColor: Colors.white,
      labelText: label,
      hintText: ' ',
      alignLabelWithHint: true, //開始位置を上寄せ
      suffixIconConstraints:
      const BoxConstraints(maxWidth: 23, minWidth: 10),
      contentPadding: const EdgeInsets.symmetric(
        vertical: 12,
        horizontal: 4,
      ),
    ),
  );
}

フォーカス取得時に先頭にカーソルを移動する。 

Widget nikoText({
  required TextEditingController ctler,
  required String label,
  required Function(String? newValue) fnc,
  final List<TextInputFormatter>? inputFormatters, //追加 入力規則　①
  final String? Function(String?)? validator, //追加 検査者　②
  TextInputType? keyboardType,
  int? maxLines,
  int? minLines,
  bool? obscureText, // 入力内容をマスクする
  bool? enabled,
}) {
  return Focus(
      onFocusChange: (hasFocus) {
        if(hasFocus) {
          ctler.selection = TextSelection.fromPosition(const TextPosition(offset: 0));
        }
      },
      child:   TextFormField(
      readOnly: !(enabled ?? true),
      obscureText: obscureText ?? false,
      validator: validator, //追加 バリデーション　③
      inputFormatters: inputFormatters, //追加 入力規則　④
      autovalidateMode: AutovalidateMode.onUserInteraction, //追加 チェックのタイミング　⑤
      controller: ctler,
      maxLines: maxLines ?? 1,
      minLines: minLines ?? 1,
      autofocus: true,
      keyboardAppearance: Brightness.dark,
      style: const TextStyle(
        fontSize: 20,
      ),
      onChanged: (String? newValue) => fnc(newValue),
      keyboardType: keyboardType,
      decoration: InputDecoration(
        isDense: true,
        border: const OutlineInputBorder(),
        filled: true, // fillColorで指定した色で塗り潰し
        fillColor: Colors.white,
        labelText: label,
        hintText: ' ',
        alignLabelWithHint: true, //開始位置を上寄せ
        // suffixIcon: IconButton(
        //   padding: const EdgeInsets.all(0),
        //   icon: const Icon(Icons.clear),
        //   onPressed: ()=> ctler.clear(),
        // ),
        suffixIconConstraints: const BoxConstraints(maxWidth: 23, minWidth: 10),
        contentPadding: const EdgeInsets.symmetric(
          vertical: 12,
          horizontal: 4,
        ),
      ),
      )
    );
}

flutter web textがiphoneではうまく入力できないとのこと

はい、Flutter Webのテキスト入力は、iPhoneではうまく動作しないことがあります。原因は、iPhoneのキーボードがFlutter Webのテキストフィールドのレイアウトと干渉するためです。

具体的には、iPhoneのキーボードは、テキストフィールドの下部に表示されます。しかし、Flutter Webのテキストフィールドは、デフォルトでは、キーボードの下に表示されない場合があります。そのため、キーボードが表示されると、テキストフィールドが上に押し上げられ、テキスト入力が困難になることがあります。

この問題を解決するには、Flutter Webのテキストフィールドのレイアウトを調整する必要があります。具体的には、以下のような方法があります。

TextFieldウィジェットのautofocusプロパティをtrueに設定します。これにより、テキストフィールドが常にフォーカス状態になり、キーボードが常に表示されます。 TextFieldウィジェットのkeyboardAppearanceプロパティをdarkに設定します。これにより、キーボードの背景色が暗くなり、テキストフィールドが見えやすくなります。 TextFieldウィジェットのdecorationプロパティで、borderプロパティを設定します。これにより、テキストフィールドの境界線が表示され、キーボードの下端と位置合わせしやすくなります。

datetime_picker_formfieldが廃止 

datetime_picker_formfieldウィジェットは、2024年後半のFlutterのリリースで廃止される予定です。

このウィジェットは、Material DesignのTimePickerウィジェットを拡張したものです。TimePickerウィジェットは、時刻の選択に使用できるウィジェットです。

datetime_picker_formfieldウィジェットは、TimePickerウィジェットの機能を拡張し、フォームのフィールドとして使用できるようにするものです。具体的には、以下の機能を追加しています。

検証機能
バリデーションエラーの表示
デフォルト値の設定
しかし、これらの機能は、TextFieldウィジェットとTimePickerウィジェットの組み合わせで実現できます。そのため、datetime_picker_formfieldウィジェットは、廃止されることになりました。

datetime_picker_formfieldウィジェットを廃止する代わりに、以下の方法で時刻の入力を実現することを推奨しています。

TextFieldウィジェットとTimePickerウィジェットの組み合わせ
time_pickerパッケージの使用
TextFieldウィジェットとTimePickerウィジェットの組み合わせは、最もシンプルな方法です。具体的には、以下のコードで実現できます。

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter TimePicker'),
        ),
        body: Center(
          child: Column(
            children: [
              TextField(
                decoration: InputDecoration(
                  labelText: '時刻',
                ),
              ),
              TimePicker(
                selectedTime: TimeOfDay.now(),
                onTimeChanged: (TimeOfDay time) {
                  // 時刻が変更されたときに実行する処理
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}
time_pickerパッケージは、FlutterのTimePickerウィジェットを拡張したパッケージです。TimePickerウィジェットに追加の機能を提供するだけでなく、様々なウィジェットと組み合わせて使用できるようにするものです。

time_pickerパッケージを使用する場合は、以下のコードで実現できます。

import 'package:flutter/material.dart';
import 'package:time_picker/time_picker.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter TimePicker'),
        ),
        body: Center(
          child: TimePicker(
            initialValue: TimeOfDay.now(),
            onTimeChanged: (TimeOfDay time) {
              // 時刻が変更されたときに実行する処理
            },
          ),
        ),
      ),
    );
  }
}
どちらの方法を使用するかは、アプリケーションの要件によって異なります。

TextFieldウィジェットとTimePickerウィジェットの組み合わせは、シンプルでわかりやすい方法です。
time_pickerパッケージを使用すると、より高度な機能を実現できます。
/* -----codeの行番号----- */