记录日常开发中用到的快速代码片段，节省开发时间
列表
ListView.builder(
shrinkWrap: true,
itemExtent: 50, // 高
itemCount: 30, // 数量
padding: const EdgeInsets.only(left: 0, right: 0, top: 0, bottom: 70), // 设置底部间距
itemBuilder: (BuildContext context, int idx) {
return ListTile(
title: Text("idx"),
);
})
搜索框
TextEditingController textController = TextEditingController();
/// 输入区域
Widget _buildSearchInput() {
return Row(
children: [
const Spacer(),
Container(
width: 343.w,
height: 40.w,
decoration: BoxDecoration(
color: const Color(0xfff3f3f3),
borderRadius: BorderRadius.circular(50.w)),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
width: 16.w,
),
Image.asset(
"assets/images/hall/mt_hall_search_white.png",
color: const Color(0xff73747a),
width: 20.w,
height: 20.w,
fit: BoxFit.fill,
),
SizedBox(
width: 6.w,
),
Expanded(
child: Container(
height: 22.w,
color: Colors.transparent,
alignment: Alignment.center,
child: TextField(
controller: textController,
onChanged: (txt) {print("用户输入的内容 $txt");},
keyboardType: TextInputType.number,
maxLines: 1,
minLines: 1,
textAlign: TextAlign.start,
cursorColor: const Color(0xff242427),
// 光标颜色
style: TextStyle(
fontSize: 15.sp,
fontWeight: FontWeight.w400,
color: const Color(0xff242427)),
decoration: InputDecoration(
fillColor: Colors.transparent,
// 背景色
filled: true,
hintText: "Search name or super ID", // 占位文字
hintStyle: TextStyle(
fontSize: 15.sp,
fontWeight: FontWeight.w400,
color: const Color(0xffa7a8af)),
contentPadding: const EdgeInsets.all(0),
border: const OutlineInputBorder(
borderSide: BorderSide.none)),
),
),
),
SizedBox(
width: 16.w,
),
],
),
),
const Spacer(),
],
);
}
透明AppBar
Scaffold(
backgroundColor: Colors.transparent,
// 背景透明
resizeToAvoidBottomInset: false,
extendBodyBehindAppBar: true,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
// 消除阴影
centerTitle: true,
shadowColor: Colors.transparent,
actions: [
_buildMoreButton(),
SizedBox(
width: 16.w,
),
],
title: Text(
"title",
style: const TextStyle(
color: Color(0xFF242427),
fontSize: 16,
fontWeight: FontWeight.w600),
),
leading: commonAppBarLeftWidget(),
),
body: Container(
color: Colors.transparent,
child: Stack(
children: [
Positioned.fill(child: _buildBgImage()),
Positioned.fill(child: _buildContent()),
],
),
),
)
效果：
image.png
文字渐变
ShaderMask(
shaderCallback: (Rect bounds) {
return const LinearGradient(
tileMode: TileMode.mirror,
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xffffdaa4), Color(0xffffbebd)])
.createShader(bounds);
},
blendMode: BlendMode.srcATop, // srcIn
child: Center(
child: Text(
"2",
style: TextStyle(fontSize: 24, fontWeight: FontWeight.w700),
),
),
)
文字内外描边渐变
Container(
color: Colors.transparent,
width: 128.w,
height: 45.w,
child: Stack(
alignment: Alignment.center,
children: [
ShaderMask(
shaderCallback: (Rect bounds) {
return const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
tileMode: TileMode.mirror,
colors: [Color(0xfffef795), Color(0xffffac29)])
.createShader(Offset.zero & bounds.size);
},
// blendMode: BlendMode.srcATop,
child: Text(
title,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.w800,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = 2
..color = const Color(0xffab3e37),
),
),
),
ShaderMask(
shaderCallback: (Rect bounds) {
return const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
tileMode: TileMode.mirror,
colors: [Color(0xfffef795), Color(0xffffac29)])
.createShader(Offset.zero & bounds.size);
},
// blendMode: BlendMode.srcATop,
child: Text(
title,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 32,
fontWeight: FontWeight.w800,
color: Color(0xfffef795),
),
),
)
],
),
)
效果：
image.png
文字阴影+边框效果
Widget shadowBorderText(
String text, {
Color shadowColor = Colors.transparent,
Color textColor = Colors.black,
Color borderColor = Colors.red,
double fontSize = 16,
FontWeight fontWeight = FontWeight.w600,
double borderSize = 3,
TextAlign? textAlign,
Offset shadowOffset = Offset.zero,
}) {
return Stack(
clipBehavior: Clip.none,
children: [
Positioned(
top: shadowOffset.dy,
left: shadowOffset.dx,
right: -shadowOffset.dx,
bottom: -shadowOffset.dy,
child: Text(
text,
textAlign: textAlign,
style: TextStyle(
fontSize: fontSize,
fontWeight: FontWeight.w600,
height: 1.1,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = borderSize
..strokeJoin = StrokeJoin.round
..color = shadowColor,
),
),
),
Text(
text,
textAlign: textAlign,
style: TextStyle(
fontSize: fontSize,
fontWeight: FontWeight.w600,
height: 1.1,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = borderSize
..strokeJoin = StrokeJoin.round
..color = borderColor,
),
),
// Solid text as fill.
Text(
text,
textAlign: textAlign,
style: TextStyle(
fontSize: fontSize,
height: 1.1,
fontWeight: FontWeight.w600,
color: textColor,
),
),
],
);
}
效果：
image.png
文本折行
背景: 要求文本到达最大宽度的时候再折行, 核心代码 BoxConstraints(maxWidth: Get.width - 16.w * 2.0), 通过设置Container的最大宽度实现文本最大宽度的约束
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Container(
constraints: BoxConstraints(maxWidth: Get.width - 16.w * 2.0),
padding:
EdgeInsets.only(left: 10.w, right: 10.w, top: 16.w, bottom: 16.w),
decoration: BoxDecoration(
color: const Color(0x1a236eff),
borderRadius: BorderRadius.circular(10.w)),
child: Text(
"技术人员会尽快受理您的反馈，感谢！",
// "技术人员会尽快受理您的反馈，感谢！技术人员会尽快受理您的反馈，感谢！技术人员会尽快受理您的反馈，感谢！",
maxLines: 5,
textAlign: TextAlign.center,
softWrap: true,
style: TextStyle(
color: const Color(0xff236eff),
fontWeight: FontWeight.w400,
fontSize: 14.sp),
),
),
],
)
拷贝assets目录资源到沙盒目录
Future<String> copyAssetsFileToDocumentsPath(String assetFile) async {
var path = await getApplicationDocumentsDirectory();
var localFilePath = '${path.path}/';
String audioEffect1Path = '${localFilePath}effect_god_poker.mp3';
var audio = File(audioEffect1Path);
if (!audio.existsSync()) {
var data = await rootBundle.load(assetFile); // "assets/audio/01.mp3"
audio = await audio.writeAsBytes(data.buffer.asUint8List());
}
return audio.path;
}
