Flutter 实现圆角输入框

界面效果如下:

源码如下：

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: Scaffold(
          body: Container(
            /// 设置外边距
            margin: EdgeInsets.all(20),
            child: TextField(
              /// 设置字体
              style: TextStyle(
                fontSize: 16,
              ),

              /// 设置输入框样式
              decoration: InputDecoration(
                hintText: '请输入手机号',

                /// 边框
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(
                    /// 里面的数值尽可能大才是左右半圆形，否则就是普通的圆角形
                    Radius.circular(50),
                  ),
                ),

                ///设置内容内边距
                contentPadding: EdgeInsets.only(
                  top: 0,
                  bottom: 0,
                ),
                /// 前缀图标
                prefixIcon: Icon(Icons.phone_iphone),
              ),
            ),
          ),
        ),
      ),
    );

【注】

1. TextField 必须在 Material Widget 下才能使用

2. Radius.circular(50) 这里面的数值尽可能的大，否则左右两边就不是半圆形的效果，比如设置为 10 ：

Tips: 除了尽可能设置更大的值以外，我没有找到其他方式实现左右半圆形的圆角效果，如果哪位大佬有其他的方式设置，请联系我: roc@havemail.cn