How can I make rounded TextField in flutter?

前端 未结 5 742
予麋鹿
予麋鹿 2021-02-02 05:35

Material Design for iOS doesn\'t look good, especially the TextField. So is there any way to create your own ? Or Is ther any way to add some styling to TextFie

5条回答
  •  耶瑟儿~
    2021-02-02 06:00

    I've collected this solution from several methods and solutions over the internet, it works very well with me, so it could help someone out there: This solution will control the width and height of the TextField, and other properties

    Container(
        child: Theme(
          data: Theme.of(context).copyWith(splashColor: Colors.transparent),
          child: TextField(
            autofocus: false,
            style: TextStyle(fontSize: 15.0, color: Color(0xFFbdc6cf)),
            decoration: InputDecoration(
              filled: true,
              fillColor: Colors.white,
              hintText: 'Search',
              contentPadding:
              const EdgeInsets.only(left: 14.0, bottom: 12.0, top: 0.0),
    
    
              focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.white),
                borderRadius: BorderRadius.circular(25.7),
              ),
    
              enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.white),
                borderRadius: BorderRadius.circular(25.7),
              ),
            ),
          ),
        ),
    
        decoration: new BoxDecoration (
          borderRadius: new BorderRadius.all(new Radius.circular(30.0)),
          color: Colors.white   ),   width: 250,   height: 50,   margin: new EdgeInsets.fromLTRB(20, 20, 20, 210),   padding: new EdgeInsets.fromLTRB(8, 8, 8, 8),
    
    ),
    

提交回复
热议问题