How to set See More and See Less content button to right side of the last line of TextformField in flutter

50 views Asked by At

I want Textformfield functionality like besides the last line of textfoemfield there should be one textbutton called seemore and seeless. firstly textformfield will have initial value and have set the maxline up to 10 if user tap on seemore it will expand and button text will be now see less. if user tap on see less it will set max line up to 10

i have used this code but this is not i wanted.

                 Container(
                          child: Column(
                            children: [
                              Row(
                                children: [
                                  Expanded(
                                    child: TextFormField(
                                      cursorColor: Colors.white,
                                      keyboardType: TextInputType.multiline,
                                      textInputAction: TextInputAction.newline,
                                      obscureText: false,
                                      style: GoogleFonts.poppins(
                                        textStyle: TextStyle(fontSize: 15, color: 
                                        AppColors.white),
                                      ),
                                      controller: descriptionController,
                                      maxLines:showMoreScript==true? null:10,
                                      minLines: 1,
                                      textCapitalization: 
                                 TextCapitalization.sentences,
                                      onChanged: (text){
                                        _update();
                                      },
                                      decoration: InputDecoration(
                                        counterText: '',
                                        contentPadding: EdgeInsets.all(16.0),
                                        hintText: 'Write your script here',
                                        hintStyle: TextStyle(fontFamily: 'Calibri', 
                                        fontSize: 16, color: AppColors.formGrey),
                                        border: InputBorder.none,

                                      ),
                                      validator: (value){
                                        if (value == null || value.isEmpty) {
                                          return 'Write your script here';
                                        }
                                        return null;
                                      },
                                    ),
                                  ),
                                  Visibility(
                                    visible: true,
                                    child: Align(
                                      alignment: Alignment.bottomRight,
                                      child: GestureDetector(
                                          onTap: (){
                                            setState(() {
                                              showMoreScript = !showMoreScript;
                                            });
                                          },
                                          child: Text("Show More",style: 
                                       GoogleFonts.poppins(textStyle: 
                                       TextStyle(color: AppColors.buttonRed,fontSize: 
                                       15)))),
                                    ),
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),

The current result:enter image description here

Expected result : enter image description here

1

There are 1 answers

1
Jawaid Mangi On

This seems like textview not textformfield if you just want to show text not make it editable. you can use this package: expandable_text from pub.dev