2

I've created a custom rounded TextField widget with shadow. Only thing I can't set is the height of the widget. I followed this SO answer to set a height, but unfortunately it doesn't set the children's height properly (it shrinks the input, but doesn't the container where the shadow is):

enter image description here

My widget:

class Input extends StatelessWidget {
  final String hintText;

  Input(this.hintText);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50,
      child: SizedBox(
        height: double.infinity,
          child: Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(30),
                  boxShadow: [
                    BoxShadow(
                        color: Color.fromRGBO(0, 0, 0, 0.05),
                        blurRadius: 15,
                        offset: Offset(0, 10),
                        spreadRadius: 10)
                  ]),
              child: TextField(
                decoration: InputDecoration(
                    enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.white, width: 1),
                        borderRadius: BorderRadius.circular(30)),
                    border: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.white, width: 1),
                        borderRadius: BorderRadius.circular(30)),
                    filled: true,
                    hintStyle: TextStyle(color: Color.fromRGBO(184, 184, 184, 1)),
                    contentPadding: EdgeInsets.all(20),
                    hintText: hintText,
                    focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.white, width: 1),
                        borderRadius: BorderRadius.circular(30)),
                    fillColor: Colors.white),
              ))),
    );
  }
}
Runtime Terror
  • 6,242
  • 11
  • 50
  • 90

0 Answers0