[Flutter]TextEditingControllerで初期値を代入するときの注意点

この様にすると文字入力する時にテキストがうまく入力できない。

初期値を代入する場所が間違っている？

class Profile extends HookWidget {
 @override
 Widget build(BuildContext context) {
   final bottomSpace = MediaQuery.of(context).viewInsets.bottom;
   final sp = useProvider(stateProvider);
   final state = useProvider(stateProvider.state);

   final areaController = TextEditingController(text: state.area);   
   
   return Scaffold(
     resizeToAvoidBottomInset: false,
     appBar: AppBar(
       title: Text('更新'),
       actions: <Widget>[
         FlatButton(
           child: Text(
             '更新',
             style: TextStyle(
               color: Colors.blue,
             ),
           ),
           // color: Colors.blue,
           onPressed: () async {
             try {
               await sp.update();
               await dialog.show(context, '更新しました');
               Navigator.pop(context);
             } catch (e) {
               dialog.show(context, e.toString());
             }
           },
         ),
       ],
     ),
     body: Center(
       child: SingleChildScrollView(
         child: Padding(
           padding: EdgeInsets.only(bottom: bottomSpace),
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
               Padding(
                 padding: const EdgeInsets.all(8.0),
                 child: Row(
                   mainAxisAlignment: MainAxisAlignment.end,
                   children: [
                     Text(
                       '＊',
                       style: TextStyle(color: Colors.red),
                     ),
                     Text('は必須'),
                   ],
                 ),
               ),
               Row(
                 children: <Widget>[
                   Text(
                     ' ＊ ',
                     style: TextStyle(color: Colors.red),
                   ),
                   Container(
                     margin: const EdgeInsets.only(
                       top: 24.0,
                     ),
                     width: 320,
                     height: 50,
                     child: TextField(
                       decoration: InputDecoration(hintText: 'エリア'),
                       // obscureText: true,
                       controller: areaController,
                       onChanged: (text) {
                         sp.setText('area', text);
                       },
                     ),
                   ),
                 ],
               ),               
             ],
           ),
         ),
       ),
     ),
   );
 }
}

初期値を代入する場所を変えたら問題なくテキスト入力できる様になった。

class Profile extends HookWidget {
 TextEditingController areaController;
 
 @override
 Widget build(BuildContext context) {
   final bottomSpace = MediaQuery.of(context).viewInsets.bottom;
   final sp = useProvider(stateProvider);
   final state = useProvider(stateProvider.state);
   
   useEffect(() {
     areaController = TextEditingController(text: state.area);   
     return () {};
   }, []);
   
   return Scaffold(
     resizeToAvoidBottomInset: false,
     appBar: AppBar(
       title: Text('更新'),
       actions: <Widget>[
         FlatButton(
           child: Text(
             '更新',
             style: TextStyle(
               color: Colors.blue,
             ),
           ),
           // color: Colors.blue,
           onPressed: () async {
             try {
               await sp.update();
               await dialog.show(context, '更新しました');
               Navigator.pop(context);
             } catch (e) {
               dialog.show(context, e.toString());
             }
           },
         ),
       ],
     ),
     body: Center(
       child: SingleChildScrollView(
         child: Padding(
           padding: EdgeInsets.only(bottom: bottomSpace),
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
               Padding(
                 padding: const EdgeInsets.all(8.0),
                 child: Row(
                   mainAxisAlignment: MainAxisAlignment.end,
                   children: [
                     Text(
                       '＊',
                       style: TextStyle(color: Colors.red),
                     ),
                     Text('は必須'),
                   ],
                 ),
               ),
               Row(
                 children: <Widget>[
                   Text(
                     ' ＊ ',
                     style: TextStyle(color: Colors.red),
                   ),
                   Container(
                     margin: const EdgeInsets.only(
                       top: 24.0,
                     ),
                     width: 320,
                     height: 50,
                     child: TextField(
                       decoration: InputDecoration(hintText: 'エリア'),
                       // obscureText: true,
                       controller: areaController,
                       onChanged: (text) {
                         sp.setText('area', text);
                       },
                     ),
                   ),
                 ],
               ),               
             ],
           ),
         ),
       ),
     ),
   );
 }
}