Adding a textfield widget to Stack results in RenderFlex children have non-zero flex but incoming width constraints are unbounded

Question

I'm trying to create the following design

Nothing complex. I'd be done in 30 minutes if it was just plain HTML and CSS but its not and Flutter is driving me nuts. Below is the code

 Widget build(BuildContext context) {   
        return 
         Stack(
          children: [
            Row(
              children: 
              [
                Expanded(
                child:  TextField(
                  maxLength: 140,
                  decoration:  InputDecoration(
                    filled: true,
                    contentPadding: EdgeInsets.only(left: 20, top: 5, right: 60, bottom: 5),
                    hintStyle: TextStyle(
                      color: Colors.grey[800]
                    ),
                    hintText: "Write something here",
                    fillColor: Colors.white,
                    focusedBorder:  OutlineInputBorder(
                      borderSide: const BorderSide(color: Colors.transparent, width: 25.0),
                      borderRadius: BorderRadius.all(Radius.circular(30)),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderSide: const BorderSide(color: Colors.transparent, width: 25.0),
                      borderRadius: BorderRadius.all(Radius.circular(30)),
                    ),
                  ),
                )
            )],
          ),
           
            Positioned(
              right: 0,
              top: 0,
              child: Center(
                child:   
                  _selectedIcon == null ?  ElevatedButton(
                    style: ButtonStyle(
                      elevation: MaterialStateProperty.all<double>(0), 
                      backgroundColor: MaterialStateProperty.all<Color>(Colors.transparent)
                    ),          
                    onPressed: () async {
                      final IconData? result = await customiconpickerFuture( context: context, defalutIcon: _selectedIcon);
                      setState(() {
                        _selectedIcon = result;
                      });
                    },
                      child: _selectedIcon == null ? const Icon(
                        IconData(0xe907, fontFamily: 'icomoon'), 
                        color: Colors.black, 
                        size: 40,
                        ) : Icon(_selectedIcon,size: 70, color: Colors.black, ) 
                  )
                  : ElevatedButton(
                    style: ButtonStyle(
                      elevation: MaterialStateProperty.all<double>(0), 
                      backgroundColor: MaterialStateProperty.all<Color>(Colors.transparent)
                    ),          
                    onPressed: () async {
                      final IconData? result = await customiconpickerFuture( context: context, defalutIcon: _selectedIcon);
                      setState(() {
                        _selectedIcon = result;
                      });
                    },
                      child: Icon(_selectedIcon,size: 40, color: Colors.black, ) 
                  )
                 
                  // this button is used to show the icon picker
                 
              
              ),
            ) 
          ],
        );
            
    }

I have an idea what the problem is. There are no constraints being passed to the Expand widget therefore its colliding with the Row widget. I've tried various other ways but none is working. Any ideas?

Answer 1

I have try other way using suffixIcon, you should try this.just change my Icon with your icon, hope it help to you.

 TextField(
      maxLength: 140,
      decoration: InputDecoration(
        //Using IconButton
        suffixIcon: IconButton(
          onPressed: () {
            print('Button Pressed');
          },
          icon: Icon(
            Icons.add,
          ),
        ),
        //Using InkWell
        /* suffixIcon: InkWell(
          onTap: () {
            print('Button Pressed using inkwell');
          },
          child: Icon(Icons.add),
        ), */
        filled: true,
        contentPadding: EdgeInsets.only(
          left: 20,
          top: 5,
          right: 60,
          bottom: 5,
        ),
        hintStyle: TextStyle(
          color: Colors.grey[800],
        ),
        hintText: "Write something here",
        fillColor: Colors.white,
        focusedBorder: OutlineInputBorder(
          borderSide: const BorderSide(
            color: Colors.transparent,
            width: 25.0,
          ),
          borderRadius: BorderRadius.all(
            Radius.circular(30),
          ),
        ),
        enabledBorder: OutlineInputBorder(
          borderSide: const BorderSide(
            color: Colors.transparent,
            width: 25.0,
          ),
          borderRadius: BorderRadius.all(
            Radius.circular(30),
          ),
        ),
      ),
    ),

Result Screen->