Flutter开发日常练习-小猫咪杂货店(新增动画和跳转抖音)

 

 之前的练习加了个详情页面,然后跳转第三方页面抖音用户详情页面

跳转详情页添加了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,
    ),

这个联系要改一下,有些不足的地方,因为不会后端,所以数据写在本地