flutter 更改主题颜色

在 main.js 中

GetMaterialApp(
    ...
      theme: ThemeData( 
        colorScheme: const ColorScheme.light().copyWith(primary: Color.fromRGBO(255, 255, 255, 1)),
      ),
    ...     
),

				

					
				
				

					
				
				

					
				
				

					
				
			

更改状态栏颜色

同样在 main.js 中

void main(){
  SystemUiOverlayStyle systemUiOverlayStyle = const SystemUiOverlayStyle(
      statusBarColor:Color.fromRGBO(255, 255, 255, 1)), /* 设置状态栏背景颜色 */
      statusBarIconBrightness: Brightness.light,/*设置状态栏颜色为白色; Brightness.dark 设置字体为黑色 light 白色*/
  );
  SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  runApp(...);
}

				

					
				
				

					
				
				

					
				
				

					
				
			

---

表单样式配置

TextField(
    maxLines: 1,
    decoration: InputDecoration(
        hintText: "搜索",
        hintStyle:TextStyle(color:Color.fromRGBO(206, 206, 206, 1)), /*提示文本样式*/
        contentPadding: EdgeInsets.symmetric(vertical:9,horizontal:-10), /*调整上下内边距,可改变输入框的高度*/
        border: InputBorder.none, /*不显示下划线*/ 
        icon:Padding( /*给左边添加图标*/
            padding:  EdgeInsets.only(left: 10,),
            child: Icon(
                Icons.search,
                color: Color.fromRGBO(228, 228, 228, 1),
            ),
        )
    ),
),

				

					
				
				

					
				
				

					
				
				

					
				
			

---

获取状态栏的高度

MediaQuery.of(context).padding.top

				

					
				
				

					
				
				

					
				
				

					
				
			

宽度填满元素

MediaQuery. of (context).size.width

				

					
				
				

					
				
				

					
				
				

					
				
			

---

点击交互水波浪改圆角

Inkell(
    borderRadius: BorderRadius.circular(20), /*交互的水波纹为圆角*/
    onTap:(){},
    child:Widget
)

				

					
				
				

					
				
				

					
				
				

					
				
			

Ink 组件配置水波纹

场景重现：如果 Inkell 的子集元素设置了背景颜色，默认的水波纹将会消失，例如下面的代码

InkWell(
    child:Container(
        decoration:BoxDecoration(
            color:Colors.red
        ),
        child:Text("按钮")
    )
)

				

					
				
				

					
				
				

					
				
				

					
				
			

解决方式：使用 Ink 组件嵌套 InkWell , 可以出现水波纹效果，使用同 Container 一致

Ink(
    decoration: BoxDecoration(
      color: MyTheme.themeColor, /*设置背景颜色*/
      borderRadius: BorderRadius.circular(20) /*设置圆角*/
    ),
    child:InkWell(
        onTap(){},
        child:Container(
            child:Text("按钮")
        )
    )
)

				

					
				
				

					
				
				

					
				
				

					
				
			

---

flutter 进度条

线性进度条

/*
* value 表示当前进度 0-1 属于 double类型
* 如果 参数为空则变成 loading 效果
*/
body:LinearProgressIndicator(value:0.4),

				

					
				
				

					
				
				

					
				
				

					
				
			

环形进度

/*用法与上面相同*/
body:CircularProgressIndicator(value:0.4)

				

					
				
				

					
				
				

					
				
				

					
				
			

---

container 组件添加阴影

Container(
    decoration:BocDecoration(
        boxShadow: const[
          BoxShadow(
            color: Colors.black12,
            offset: Offset(0.0, 0.0), /*阴影xy轴偏移量*/
            blurRadius: 4.0, /*阴影模糊程度*/
            spreadRadius:1.0 /*阴影扩散程度*/
          )
        ]
    ),
    child:<Widget>
)