Search code examples
fluttertextcontrollerflutter-layoutform-fields

How to get the TextFormField text color,fontsize, etc using controller in flutter?


I make custom textformfield class and used it as a widget. I want to get the textformfields color,fontsize,align etc which I have set.How can i get this all properties which i have set to the textformfield using controller or by anything?

My custom class code:

class CustomTextNIconWidget extends StatefulWidget {

  final Color fontColor;
  final GestureTapCallback onSingleTapWidget;
  final GestureTapCallback onDoubleTapWidget;

  final FontWeight fontWeight;

  final TextEditingController controller;

  final double fontSize;

  CustomTextNIconWidget(
      {Key key,
      @required this.hint,
      this.controller,
      this.fontSize,

      this.fontColor,

      this.fontWeight,
      this.textAlign,
      this.onSingleTapWidget,
      this.onDoubleTapWidget})
      : super(key: key);

  @override
  _CustomTextNIconWidgetState createState() => _CustomTextNIconWidgetState();
}

class _CustomTextNIconWidgetState extends State<CustomTextNIconWidget> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: widget.onSingleTapWidget,
      onDoubleTap: widget.onDoubleTapWidget,
      child: Container(
        child: TextFormField(
          controller: widget.controller,
          style: TextStyle(
              color: widget.fontColor,
              fontSize:
                  widget.fontSize == null ? getFontSize() : widget.fontSize,
              fontWeight: widget.fontWeight == null
                  ? getFontWeight()
                  : widget.fontWeight),
          decoration: InputDecoration(
              hintText: widget.hint,
              hintStyle: TextStyle(color:white)),

        ),
      ),
    );
  }

I have used as:

CustomTextNIconWidget(
                    controller: myController,
                    hint: getAddress(),
                    fontColor: Colors.amber,
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    onSingleTapWidget: (){
                      print("Text color,fontsize:{HowToGetAboveSetProperties}");
                    },
                  ),





Solution

  • You need to use GlobalKey for this. Create a GlobalKey<_CustomTextNIconWidgetState> as follows:

    GlobalKey<_CustomTextNIconWidgetState> _customTextNIconWidgetStateKey = GlobalKey<_CustomTextNIconWidgetState>();
    

    give this key as parameter to your custom widget as:

    CustomTextNIconWidget(
      key: _customTextNIconWidgetStateKey, // <-- key
      controller: myController,
      hint: getAddress(),
      fontColor: Colors.amber,
      fontSize: 18,
      fontWeight: FontWeight.bold,
      onSingleTapWidget: (){
        print("Text color,fontsize:{HowToGetAboveSetProperties}");
      },
    ),
    

    After the widgets is pushed into the widget tree you can access the parameters with:

    _customTextNIconWidgetStateKey.currentState.widget
    

    For example to access the fontColor you can do this:

    Color _fontColor = _customTextNIconWidgetStateKey.currentState.widget.fontColor;
    

    To wait for the widget to get pushed in the widget tree and get callback for the same, you can use WidgetsBinding.instance.addPostFrameCallback((_){})

    use this in your init state or build method.

    WidgetsBinding.instance.addPostFrameCallback((_){
        Color _fontColor = _customTextNIconWidgetStateKey.currentState.widget.fontColor;
    });
    

    To use this key in different dart file then where your _CustomTextNIconWidgetState is declared, you will need to make it public (by renaming it to CustomTextNIconWidgetState).

    After you make all the above changes you will be having a code something similar to following:

    class MyApp extends StatelessWidget {
    
      GlobalKey<CustomTextNIconWidgetState> _customTextNIconWidgetStateKey = GlobalKey<CustomTextNIconWidgetState>();
    
      @override
      Widget build(BuildContext context) {
    
        WidgetsBinding.instance.addPostFrameCallback((_){
          Color _fontColor = _customTextNIconWidgetStateKey.currentState.widget.fontColor;
        });
    
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: Scaffold(
            body: Center(
              child: CustomTextNIconWidget(
                key: _customTextNIconWidgetStateKey, // <-- key
                controller: myController,
                hint: getAddress(),
                fontColor: Colors.amber,
                fontSize: 18,
                fontWeight: FontWeight.bold,
                onSingleTapWidget: (){
                  print("Text color,fontsize:{HowToGetAboveSetProperties}");
                },
              ),
            ),
          ),
        );
      }
    }
    

    I hope this helps, in case of any doubts please comment. If this answer helps you then please accept and up-vote.