how to make widget scale up when it selected in Flutter

June 18, 2022

I have an app that has pageView.builder and it contains 5 stack widget

how can I scale up the widget that user-selected, for example:

if the user scrolls to widget 3, widgets 1 & 2 become smaller than widget 3, and the same if he scrolls to widget 5 or 2

( the middle will become bigger than the widget on both sides)

my code :

    Widget build(BuildContext context) {
    // ignore: sized_box_for_whitespace
    return Container(
      height: 320,
      child: PageView.builder(
          controller: pageController,
          itemCount: 5,
          itemBuilder: (context, position) {
            return _bulidPageItem(position);
          }),
    );
  }

  Widget _bulidPageItem(int index) {

//------------------------------------------------------------------------------
// Slide image 🚩
    return Stack(
      alignment: Alignment.topCenter,
      children: [
        Container(
          margin: const EdgeInsets.only(left: 5, right: 5),
          height: 220,
          width: 350,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            color: index.isEven
                ? const Color(0xFFffd28d)
                : const Color(0xFF89dad0),
            image: const DecorationImage(
                image: AssetImage('images/chineseFood.jpg'), fit: BoxFit.cover),
          ),
        ),
//------------------------------------------------------------------------------
// Slide Information 🚩
        Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            margin: const EdgeInsets.only(left: 30, right: 30, bottom: 15),
            height: 130,
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                    color: Colors.grey.withOpacity(0.3),
                    blurRadius: 6,
                    spreadRadius: 0.7,
                    offset: const Offset(1, 4))
              ],
              borderRadius: BorderRadius.circular(25),
              color: Colors.white,
            ),
//------------------------------------------------
// Slider title
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const BigText(
                    text: 'Chinese side',
                  ),
//----------------------------------------------
// Slider Rating
                  const SizedBox(height: 10),
                  Row(
                    children: [
                      Wrap(
                        children: List.generate(
                          5,
                          (index) => const Icon(Icons.star,
                              color: AppColor.mainColor, size: 12),
                        ),
                      ),
                      const SizedBox(width: 10),
                      SmallText(text: 4.5.toString()),
                      const SizedBox(width: 10),
                      const SmallText(text: '1287 comments'),
                    ],
                  ),
                  const SizedBox(height: 20),
//----------------------------------------------
// Slider Icons
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: const [
                      SliderIcons(
                          color: AppColor.iconColor1,
                          text: 'Normal',
                          icon: Icons.circle),
                      SliderIcons(
                          color: AppColor.mainColor,
                          text: '1.7km',
                          icon: Icons.location_pin),
                      SliderIcons(
                          color: AppColor.iconColor2,
                          text: '32min',
                          icon: FontAwesomeIcons.clock),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
  ],
);

}
}