如何为容器/按钮垂直上下设置动画?

时间:2019-07-08 18:07:44

标签: flutter dart flutter-layout flutter-animation

在单击按钮后,我试图像升降机一样垂直上下调整中心按钮的动画,但不知道如何解决。我在此按钮的其他位置上使用了sequenceAnimations,因此我尝试将其包装在Positioned部件中,并更改与Tween配合的底部偏移以在值之间循环,不幸的是,这导致LayoutErrors和崩溃...

尝试换行。

                    func productDetailsApi() {

                        let param: [String:Any] = ["product_id" : product?.product_id ?? "", "token": commonClass.sharedInstance.userToken ?? "" ]
                        print(param)
                        //printD("param: \(param)")

                        Alamofire.request(ShopConstants.ShopAPI.Shopurl("productDetails"), method: .post, parameters: param, encoding: URLEncoding.default, headers: nil).responseJSON {
                            (response:DataResponse<Any>) in
                            let json = response.result.value
                            printD(json)
                             let Json = json as! [String:Any]
                            printD(Json)

                             let status = Json["status"] as! Int
                            if status == 1 {
                                let data = Json["data"] as! [String:Any]
                                  let product_detail = data["product_detail"] as! [String:Any]
                               printD(product_detail)
                                 let sizes = data["sizes"] as! [[String:Any]]
                                for item in sizes{
                                    let getsize = item["sizes"]as! String
                                    self.dataArray.append(sizeData(sizevalue: getsize, sizeing: sizes))
                                }
                                self.tableView.reloadData()

                            }
                        }

                    }

                tableView:-  

                 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
                        return dataArray.count
                    }

                    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
                    let cell = tableView.dequeueReusableCell(withIdentifier: "SizelistCell")as!
                        SizelistCell
                        cell.sizeLabel.text = dataArray[indexPath.row].sizevalue
                        return cell
                    }

                }

    my response:-

    my json:-

        {
            "status": 1,
            "data": {
                "product_detail": {
                    "id": 35588,
                    "name": "relaxo",
                    "alias": "relaxo",
                    "release_date": "2019-01-31 12:01:00",
                    "images": null,
                    "description": "Lorem ispum   lorem ispum Lorem ispum   lorem ispum Lorem ispum   lorem ispum",
                    "sku": "rel-1200",
                    "style_code": "rel-1200",
                    "original_price": "",
                    "offer_price": {
                        "min_price": 100,
                        "offer_price": 100,
                        "color": "red",
                        "size": "10",
                        "stock": 2,
                        "sold": 0,
                        "original_price": 120
                    },
                    "is_offer": 0,
                    "hero_image": null,
                    "available_at": null,
                    "url": null,
                    "release_day": null,
                    "release_month": null,
                    "brand_id": 117,
                    "store_id": 24,
                    "hero_image_url": "",
                    "hero_image_id": null,
                    "release_date_pretty": null,
                    "original_price_pretty": "",
                    "hero_image_alt": null,
                    "canonical_url": null,
                    "merchant_name": null,
                    "shipping_policy": null,
                    "style": null,
                    "scrap_from": null,
                    "meta_title": "",
                    "meta_keywords": "",
                    "meta_description": "",
                    "is_server": 0,
                    "is_top_sale": 0,
                    "is_most_viewed": 0,
                    "product_type": "women",
                    "status": 1,
                    "is_deleted": 0,
                    "date_updated": "",
                    "date_created": "",
                    "created_at": "2019-02-02 07:06:34",
                    "updated_at": "2019-07-08 06:00:01",
                    "slide_images": [],
                    "available_qty": 2,
                    "ColorData": {
                        "min_price": 100,
                        "offer_price": 100,
                        "color": "red",
                        "size": "10",
                        "stock": 2,
                        "sold": 0,
                        "original_price": 120
                    },
                    "sizes": [
                        {
                            "sizes": "10"
                        }
                    ],
                    "colorset": "red",
                    "colors": [
                        {
                            "color": "red"
                        }
                    ],
                    "average": null,
                    "count": 0
                },
                "policy": {
                    "id": 30828,
                    "product_id": 35588,
                    "meta_key": "policy_config",
                    "meta_value": "{\"warranty_policy\":\"Yes\",\"return_policy\":\"No\",\"delivery_policy\":\"Yes\",\"cancellation_policy\":\"Yes\"}",
                    "created_at": "2019-02-02 07:06:35",
                    "updated_at": "2019-02-02 07:06:35"
                },
                "policy_details": [
                    {
                        "id": 2,
                        "type": "delivery_policy",
                        "description": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla augue nec est tristique auctor. Donec non est at libero vulputate rutrum. Morbi ornare lectus quis justo gravida semper. Nulla tellus mi, vulputate adipiscing cursus eu, suscipit id nulla.<br /><br />Pellentesque aliquet, sem eget laoreet ultrices, ipsum metus feugiat sem, quis fermentum turpis eros eget velit. Donec ac tempus ante. Fusce ultricies massa massa. Fusce aliquam, purus eget sagittis vulputate, sapien libero hendrerit est, sed commodo augue nisi non neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor, lorem et placerat vestibulum, metus nisi posuere nisl, in accumsan elit odio quis mi. Cras neque metus, consequat et blandit et, luctus a nunc. Etiam gravida vehicula tellus, in imperdiet ligula euismod eget.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla augue nec est tristique auctor. Donec non est at libero vulputate rutrum. Morbi ornare lectus quis justo gravida semper. Nulla tellus mi, vulputate adipiscing cursus eu, suscipit id nulla.<br /><br />Pellentesque aliquet, sem eget laoreet ultrices, ipsum metus feugiat sem, quis fermentum turpis eros eget velit. Donec ac tempus ante. Fusce ultricies massa massa. Fusce aliquam, purus eget sagittis vulputate, sapien libero hendrerit est, sed commodo augue nisi non neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor, lorem et placerat vestibulum, metus nisi posuere nisl, in accumsan elit odio quis mi. Cras neque metus, consequat et blandit et, luctus a nunc. Etiam gravida vehicula tellus, in imperdiet ligula euismod eget.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla augue nec est tristique auctor. Donec non est at libero vulputate rutrum. Morbi ornare lectus quis justo gravida semper. Nulla tellus mi, vulputate adipiscing cursus eu, suscipit id nulla.<br /><br />Pellentesque aliquet, sem eget laoreet ultrices, ipsum metus feugiat sem, quis fermentum turpis eros eget velit. Donec ac tempus ante. Fusce ultricies massa massa. Fusce aliquam, purus eget sagittis vulputate, sapien libero hendrerit est, sed commodo augue nisi non neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor, lorem et placerat vestibulum, metus nisi posuere nisl, in accumsan elit odio quis mi. Cras neque metus, consequat et blandit et, luctus a nunc. Etiam gravida vehicula tellus, in imperdiet ligula euismod eget.</p>",
                        "status": 1,
                        "is_deleted": 0,
                        "updated_at": "2019-01-19 08:16:12",
                        "created_at": "2019-01-19 07:40:03"
                    },
                    {
                        "id": 4,
                        "type": "warranty_policy",
                        "description": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla augue nec est tristique auctor. Donec non est at libero vulputate rutrum. Morbi ornare lectus quis justo gravida semper. Nulla tellus mi, vulputate adipiscing cursus eu, suscipit id nulla.<br /><br />Pellentesque aliquet, sem eget laoreet ultrices, ipsum metus feugiat sem, quis fermentum turpis eros eget velit. Donec ac tempus ante. Fusce ultricies massa massa. Fusce aliquam, purus eget sagittis vulputate, sapien libero hendrerit est, sed commodo augue nisi non neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor, lorem et placerat vestibulum, metus nisi posuere nisl, in accumsan elit odio quis mi. Cras neque metus, consequat et blandit et, luctus a nunc. Etiam gravida vehicula tellus, in imperdiet ligula euismod eget.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla augue nec est tristique auctor. Donec non est at libero vulputate rutrum. Morbi ornare lectus quis justo gravida semper. Nulla tellus mi, vulputate adipiscing cursus eu, suscipit id nulla.<br /><br />Pellentesque aliquet, sem eget laoreet ultrices, ipsum metus feugiat sem, quis fermentum turpis eros eget velit. Donec ac tempus ante. Fusce ultricies massa massa. Fusce aliquam, purus eget sagittis vulputate, sapien libero hendrerit est, sed commodo augue nisi non neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor, lorem et placerat vestibulum, metus nisi posuere nisl, in accumsan elit odio quis mi. Cras neque metus, consequat et blandit et, luctus a nunc. Etiam gravida vehicula tellus, in imperdiet ligula euismod eget.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla augue nec est tristique auctor. Donec non est at libero vulputate rutrum. Morbi ornare lectus quis justo gravida semper. Nulla tellus mi, vulputate adipiscing cursus eu, suscipit id nulla.<br /><br />Pellentesque aliquet, sem eget laoreet ultrices, ipsum metus feugiat sem, quis fermentum turpis eros eget velit. Donec ac tempus ante. Fusce ultricies massa massa. Fusce aliquam, purus eget sagittis vulputate, sapien libero hendrerit est, sed commodo augue nisi non neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor, lorem et placerat vestibulum, metus nisi posuere nisl, in accumsan elit odio quis mi. Cras neque metus, consequat et blandit et, luctus a nunc. Etiam gravida vehicula tellus, in imperdiet ligula euismod eget.</p>",
                        "status": 1,
                        "is_deleted": 0,
                        "updated_at": "2019-01-19 11:57:31",
                        "created_at": "2019-01-19 07:40:03"
                    },
                    {
                        "id": 5,
                        "type": "cancellation_policy",
                        "description": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla augue nec est tristique auctor. Donec non est at libero vulputate rutrum. Morbi ornare lectus quis justo gravida semper. Nulla tellus mi, vulputate adipiscing cursus eu, suscipit id nulla.<br /><br />Pellentesque aliquet, sem eget laoreet ultrices, ipsum metus feugiat sem, quis fermentum turpis eros eget velit. Donec ac tempus ante. Fusce ultricies massa massa. Fusce aliquam, purus eget sagittis vulputate, sapien libero hendrerit est, sed commodo augue nisi non neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor, lorem et placerat vestibulum, metus nisi posuere nisl, in accumsan elit odio quis mi. Cras neque metus, consequat et blandit et, luctus a nunc. Etiam gravida vehicula tellus, in imperdiet ligula euismod eget.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla augue nec est tristique auctor. Donec non est at libero vulputate rutrum. Morbi ornare lectus quis justo gravida semper. Nulla tellus mi, vulputate adipiscing cursus eu, suscipit id nulla.<br /><br />Pellentesque aliquet, sem eget laoreet ultrices, ipsum metus feugiat sem, quis fermentum turpis eros eget velit. Donec ac tempus ante. Fusce ultricies massa massa. Fusce aliquam, purus eget sagittis vulputate, sapien libero hendrerit est, sed commodo augue nisi non neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor, lorem et placerat vestibulum, metus nisi posuere nisl, in accumsan elit odio quis mi. Cras neque metus, consequat et blandit et, luctus a nunc. Etiam gravida vehicula tellus, in imperdiet ligula euismod eget.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla augue nec est tristique auctor. Donec non est at libero vulputate rutrum. Morbi ornare lectus quis justo gravida semper. Nulla tellus mi, vulputate adipiscing cursus eu, suscipit id nulla.<br /><br />Pellentesque aliquet, sem eget laoreet ultrices, ipsum metus feugiat sem, quis fermentum turpis eros eget velit. Donec ac tempus ante. Fusce ultricies massa massa. Fusce aliquam, purus eget sagittis vulputate, sapien libero hendrerit est, sed commodo augue nisi non neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor, lorem et placerat vestibulum, metus nisi posuere nisl, in accumsan elit odio quis mi. Cras neque metus, consequat et blandit et, luctus a nunc. Etiam gravida vehicula tellus, in imperdiet ligula euismod eget.</p>",
                        "status": 1,
                        "is_deleted": 0,
                        "updated_at": "2019-01-19 11:57:31",
                        "created_at": "2019-01-19 07:40:03"
                    }
                ],
                "brandSizeInches": {
                    "cm": [
                        "10",
                        "10",
                        "10"
                    ],
                    "us": [
                        "10",
                        "10",
                        "10"
                    ],
                    "uk": [
                        "10",
                        "10",
                        "10"
                    ],
                    "inches": [
                        "10",
                        "10",
                        "10"
                    ],
                    "euro": [
                        "11",
                        "11",
                        "11"
                    ]
                }
            },
            "msg": "Product Details found successfully"
        }

我正在尝试对粉红色的圆圈/按钮进行上下动画处理。 https://imgur.com/a/Iu7i5uw

1 个答案:

答案 0 :(得分:0)

您可以使用AnimatedContainer,这是一个示例:

class UpDown extends StatefulWidget {
  @override
  UpDownState createState() {
    return UpDownState();
  }
}

class UpDownState extends State<UpDown> {
  bool up = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedContainer(
          padding: EdgeInsets.all(10.0),
          duration: Duration(milliseconds: 250), // Animation speed
          transform: Transform.translate(
            offset: Offset(0, up == true ? -100 : 0), // Change -100 for the y offset
          ).transform,
          child: Container(
            height: 50.0,
            child: FloatingActionButton(
              backgroundColor: Colors.red,
              child: Icon(Icons.ac_unit),
              onPressed: () {
                setState(() {
                  up = !up;
                });
              },
            ),
          ),
        ),
      ),
    );
  }
}