因为flutter 经常因为版本什么鬼的跑不起来。所有我只把实现代码发上来
代码地址：
1.安装导入flutter_neumorphic
flutter_neumorphic: ^3.2.0
import 'package:flutter_neumorphic/flutter_neumorphic.dart';
part 'toggle.dart';
part 'neumorphic_switch.dart';
part 'neumorphic_box.dart';
2.导入主体文件
Container(
color: Color(0xFFEEF0F5),
width: double.maxFinite,
padding: EdgeInsets.only(left: 20, right: 20, top: 60, bottom: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
flex: 3,
child:
NeumorphicText(
'甘甘小家',
textStyle: NeumorphicTextStyle(
fontSize: 24,
fontWeight: FontWeight.w800,
),
style: NeumorphicStyle(
depth: 3,
lightSource: LightSource.left,
color: Color(0xFF243048),
),
textAlign:TextAlign.left
),
),
Expanded(
flex: 1,
child:
NeumorphicButton(
style: NeumorphicStyle(
boxShape: NeumorphicBoxShape.circle(),
color: Color(0xFFF5FAFE),
shape: NeumorphicShape.concave,
),
child: Container(
width: 36,
height: 36,
child: Icon(
Icons.view_module,
color: Color(0xFF6B7C95)
),
),
onPressed: () {},
),
)
],
),
SizedBox(height:20),
Neumorphic(
// margin: const EdgeInsets.only(left: 8, right: 8, top: 2, bottom: 4),
style: NeumorphicStyle(
// depth: NeumorphicTheme.embossDepth(context),
boxShape: NeumorphicBoxShape.rect(),
color: Color(0xFFF5FAFE)),
padding:EdgeInsets.only(left: 20, right: 20, top: 10, bottom: 20),
child:
Container(
child:Column(
children: [
Row(
children: [
Expanded(
flex: 3,
child:Row(
children: [
Image.asset(
'assets/images/cloud.png',
width:55,
height:55
),
NeumorphicText(
'多云',
textStyle: NeumorphicTextStyle(
fontSize: 18,
fontWeight: FontWeight.w700,
),
style: NeumorphicStyle(
depth: 3,
lightSource: LightSource.left,
color: Color(0xFF243048),
),
textAlign:TextAlign.left
),
]
)
),
Expanded(
flex: 1,
child:Row(
children: [
Icon(
Icons.gps_fixed,
size:18,
color: Color(0xFF6B7C95)
),
NeumorphicText(
'北京',
textStyle: NeumorphicTextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
),
style: NeumorphicStyle(
depth: 3,
lightSource: LightSource.left,
color: Color(0xFF243048),
),
textAlign:TextAlign.left
),
]
)
),
],
),
SizedBox(height:10),
Row(
children: [
Expanded(
flex: 1,
child:
NeumorphicText(
'5度',
textStyle: NeumorphicTextStyle(
fontSize:30,
fontWeight: FontWeight.w800,
),
style: NeumorphicStyle(
depth: 3,
lightSource: LightSource.left,
color: Color(0xFFF5D22A),
),
textAlign:TextAlign.left
),
),
Expanded(
flex: 1,
child:Column(
children: [
NeumorphicText(
'23',
textStyle: NeumorphicTextStyle(
fontSize: 20,
fontWeight: FontWeight.w600,
),
style: NeumorphicStyle(
depth: 3,
lightSource: LightSource.left,
color: Color(0xFF243048),
),
textAlign:TextAlign.left
),
SizedBox(height:5),
NeumorphicText(
'空气质量',
textStyle: NeumorphicTextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
),
style: NeumorphicStyle(
depth: 3,
lightSource: LightSource.left,
color: Color(0xFF243048),
),
textAlign:TextAlign.left
),
],
)
),
Expanded(
flex: 1,
child: Column(
children: [
NeumorphicText(
'40%',
textStyle: NeumorphicTextStyle(
fontSize: 20,
fontWeight: FontWeight.w600,
),
style: NeumorphicStyle(
depth: 3,
lightSource: LightSource.left,
color: Color(0xFF243048),
),
textAlign:TextAlign.left
),
SizedBox(height:5),
NeumorphicText(
'湿度',
textStyle: NeumorphicTextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
),
style: NeumorphicStyle(
depth: 3,
lightSource: LightSource.left,
color: Color(0xFF243048),
),
textAlign:TextAlign.left
),
],
)
),
],
),
],
)
)
),
SizedBox(height:18),
NeumorphicToggleWidget(),
SizedBox(height:18),
Row(
children: [
NeumorphicBox(imgageUrl:'assets/images/light.png',name:'灯泡'),
SizedBox(width:14),
NeumorphicBox(imgageUrl:'assets/images/tv.png',name:'电视'),
]
),
SizedBox(height:18),
Row(
children: [
NeumorphicBox(imgageUrl:'assets/images/camera.png',name:'摄像头'),
SizedBox(width:14),
NeumorphicBox(imgageUrl:'assets/images/route.png',name:'路由器')
]
),
SizedBox(height:45),
Row(
children: [
Expanded(
flex:1,
child: NeumorphicButton(
style: NeumorphicStyle(
boxShape: NeumorphicBoxShape.circle(),
color: Color(0xFFF5FAFE),
shape: NeumorphicShape.concave,
),
child: Container(
width: 36,
height: 36,
child: Icon(
Icons.widgets,
color: Color(0xFF6B7C95)
),
),
onPressed: () {},
) ,
),
Expanded(
flex:1,
child: NeumorphicButton(
style: NeumorphicStyle(
boxShape: NeumorphicBoxShape.circle(),
color: Color(0xFFF5FAFE),
shape: NeumorphicShape.concave,
),
child: Container(
width: 36,
height: 36,
child: Icon(
Icons.home_filled,
color: Color(0xFF6B7C95)
),
),
onPressed: () {},
) ,
),
Expanded(
flex:1,
child: NeumorphicButton(
style: NeumorphicStyle(
boxShape: NeumorphicBoxShape.circle(),
color: Color(0xFFF5FAFE),
shape: NeumorphicShape.concave,
),
child: Container(
width: 36,
height: 36,
child: Icon(
Icons.account_circle,
color: Color(0xFF6B7C95)
),
),
onPressed: () {},
) ,
)
]
)
]
)
);}
