Sizing images in a vertical pageview without compromising the space between each element?

1

Hello all I am having an issue with resizing an animated container in a pageview. If i resize the image I lose the amount of space in between and if I right a conditional statement to check if the container is an activePage if not higher the other container but when I do that I lose the smoothness of the pageview so how do I get the cards to the right size with compromising the space in between them?
Link to a photo to show the amount of spacing desired and video to show the desired effect. https://photos.app.goo.gl/q3zo6Fw5i2sM4X2K6 The height of the container/image needs to be 499. If more information is needed tag me in a comment!

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'GroupHome.dart';
import 'size_config.dart';
import 'CardTile.dart';

class GroupFeed extends StatefulWidget {
  GroupFeed({Key key}) : super(key: key);

  @override
  _GroupFeedState createState() => _GroupFeedState();
}

class _GroupFeedState extends State<GroupFeed> {
  final PageController _pageController = PageController(viewportFraction: 0.8);
  int _currentPage = 0;

  var _listSlide = [
    {
      'id': 0,
      'image': 'assets/highImg/food_image4.jpg',
      'text1': 'Old fashioned pancakes w/ farm fresh maple syrup',
      'profilePic': 'assets/highImg/sam.png',

    },
    {
      'id': 1,
      'image': 'assets/highImg/food_image3.jpg',
      'text1': 'Bittersweet chunky red berry popsicles',
      'profilePic': 'assets/highImg/sam.png',
    },
    {
      'id': 2,
      'image': 'assets/highImg/food_image5.jpg',
      'text1': 'Homemade honey granola topped with fresh berries',
      'profilePic': 'assets/highImg/sam.png',
      
    },
    {
      'id': 3,
      'image': 'assets/highImg/food_image7.jpg',
      'text1': 'Mint Oreo Cookie Parfait ',
      'profilePic': 'assets/highImg/sam.png',
  
    }
  ];

  @override
  void initState() {
    _pageController.addListener(() {
      int next = _pageController.page.round();
      if (_currentPage != next) {
        setState(() {
          _currentPage = next;
        });
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var data = MediaQuery.of(context);
    var screenHeight = data.size.height;
    var screenWidth = data.size.width;
    
    return Scaffold(
      body: SafeArea(
        bottom: false,
        top: false,
        child: 
            Stack(
          children: <Widget>[
            Padding(
                padding: EdgeInsets.only(top:43.5),
                          child: 
                          Container(
                            margin: EdgeInsets.only(top:56.5,),
                            height: 712,
                            decoration: BoxDecoration(
                    //color: Color(0x00000000),
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(27.5),
                      topRight: Radius.circular(27.5),
                    ),
                  ),
                            child: ClipRRect(
                          
                    //color: Color(0x00000000),
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(27.5),
                      topRight: Radius.circular(27.5),
                    ),
                  
                                                          child: Stack(
                                                            children: [
                                                              PageView.builder(
                scrollDirection: Axis.vertical,
                controller: _pageController,
                itemCount: _listSlide.length,
                itemBuilder: (_, currentIndex) {
                  bool activePage = currentIndex == _currentPage;
                  return Stack(
                      children: <Widget>[
                        CardTile(
                              activePage: activePage,
                              image: _listSlide[currentIndex]['image'],
                        ),
                },
              
              ),
                                                            ],
                                                          ),
                            ),
                          ),
            ),
           GestureDetector(
                    onTap: () {
                    Navigator.push(
            context,
                        MaterialPageRoute(
                            builder: (context) => GroupHome (),fullscreenDialog: true),
                    );
                    },
                    child:
                     Stack(
                      children: <Widget>[
                        Stack(
                          children: <Widget>[
                            ///25,56
                            Padding(
                              padding:
                                   EdgeInsets.fromLTRB(25, 52, 0, 0),
                              child: Container(
                                width: 30.0,
                                height: 30.0,
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.all(
                                      Radius.elliptical(9999.0, 9999.0)),
                                  color: const Color(0xffffffff),
                                ),
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.fromLTRB(36, 60, 0, 0),
                              child: Container(
                                width: 8.5,
                                height: 14.9,
                                decoration: BoxDecoration(
                              image: DecorationImage(
                                image: const AssetImage(
                                    'assets/highImg/back.png'),
                                fit: BoxFit.fill,
                              ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                 ),
          ],
        ),
        //   ],
        //),
      ),
    );
  }
}

class CardTile extends StatelessWidget {

  final String image;
  final bool activePage;


  const CardTile({Key key, this.image, this.activePage}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    var data = MediaQuery.of(context);
    var screenHeight = data.size.height;
    var screenWidth = data.size.width;
    final double top =  /*this.activePage ?*/ (0/812)*screenHeight /*:(0/812)*screenHeight*/;///(185/812)*screenHeight : (235/812)*screenHeight; //50 ///
    final double bottom = /*this.activePage ? */(10/812)*screenHeight/*: *(25/812)*screenHeight*/ ; //(125/812)*screenHeight : (175/812)*screenHeight;
    final double blur =  5; //30
    final double offset = (2.5/375)*screenWidth; //20
    final double sides = 23;//30:2;
    double space =0;

    return  Transform.translate(
          offset:Offset(0,space),
          child: Padding(
        padding: EdgeInsets.only(bottom:0),
        child: Transform.translate(
          offset: Offset(0,-45),
                child: AnimatedContainer(
            //height: 509,
            //height: this.activePage ?  499: 399,
            duration: Duration(milliseconds: 00),
            curve:  Curves.easeOutQuint,
            //padding: EdgeInsets.only(bottom:25),
            margin: EdgeInsets.only(top: top, bottom: bottom, right: sides,left:sides), //right: 15,left:15
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(27.5),
                image: DecorationImage(
                    image: AssetImage(this.image), fit: BoxFit.cover),
                boxShadow: [
                  BoxShadow(
                    color: Color(0x80000000),
                    blurRadius: blur,
                    offset: Offset(offset, offset)
                  )
                ]),
          ),
        ),
      ),
    );
}
} 
flutter
spacing
sizing
flutter-pageview
animatedcontainer
asked on Stack Overflow Sep 8, 2020 by Isis Curiel • edited Sep 11, 2020 by Isis Curiel

0 Answers

Nobody has answered this question yet.


User contributions licensed under CC BY-SA 3.0