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)
)
]),
),
),
),
);
}
}
User contributions licensed under CC BY-SA 3.0