之前的练习加了个详情页面,然后跳转第三方页面抖音用户详情页面
跳转详情页添加了Hero的动画,共享元素过度
一个 标准 hero 动画 使 hero 从一页飞至新页面,通常以不同大小到达不同的目的地。
设定好每个图片的id,通过id作为 'Hero' 组件的标识,id不能重,否则会报错,在这两个页面中必须相同
Hero(
tag: "$id",
child: Image.asset(
imagePath,
height: 64,
),
),
在跳转的页面也要加入id
Hero(
tag: "$id",
child: Image.asset(
"assets/8b10de68e58cfef6bd5f22e5321537.jpg",
width: 200,
height: 200,
fit: BoxFit.cover,
),
),
Flutter开发日常练习-小猫咪杂货店https://blog.csdn.net/zxc8890304/article/details/130150733?spm=1001.2014.3001.5501
白名单
<array>
<string>douyinopensdk</string>
<string>douyinsharesdk</string>
<string>snssdk1128</string>
</array>
url_launcher: ^6.0.10
URL Launcher是一个Flutter插件,它允许您的应用程序启动网络浏览器、地图应用程序、拨号器应用程序、邮件应用程序等。URL Launcher插件通过创建意图来打开使用不同URL方案的应用程序。
_launchURL() async {
// 1.url Scheme
// const url = 'snssdk1128:';
const url = 'snssdk1128://user/profile/xxxxxx';//替换你自己的id
// 2. 判断当前手机是否安装某app. 能否正常跳转
if (await canLaunch(url)) {
// 2.1 正常跳转
await launch(url);
} else {
// 2.2 不能跳转
throw 'Could not launch $url';
}
}
给列表上的文字加了个缩放的提示动画,感觉很有意思,也有别的效果可以自己试一下
animated_text_kit: ^4.2.2
ScaleAnimatedTextKit(
totalRepeatCount: 99999,
text: contextList,
textStyle:
TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
textAlign: TextAlign.start,
// alignment:AlignmentDirectional.topStart // or Alignment.topLeft
),
flutter_staggered_animations: ^1.1.1
列表也都加上了动画效果
AnimationConfiguration.staggeredGrid(
position: index,
columnCount: value.shopItems.length,
duration: const Duration(milliseconds: 375),
child: SlideAnimation(
verticalOffset: 50.0,
child: FadeInAnimation(
child: GroceryItemTile(
itemName: value.shopItems[index].name,
itemPrice: value.shopItems[index].price,
imagePath: value.shopItems[index].pic,
color: value.shopItems[index].color,
id: value.shopItems[index].id,
contextList: value.shopItems[index].desList,
onPressed: () {
Provider.of<CarModel>(context,
listen: false)
.addItemToCart(index);
},
),
),
),
);
}),
);
添加了点赞按钮的效果,看了下代码写的很完善,拓展很宽,你也可以按照自己的想法去修改
like_button: ^2.0.5
LikeButton(
mainAxisAlignment: MainAxisAlignment.end,
),
这个联系要改一下,有些不足的地方,因为不会后端,所以数据写在本地