Animated Container
102 views
Skip to first unread message
Mark Valeriani
Apr 6, 2021, 7:39:29 PM4/6/21
to Flutter Development (flutter-dev)
I am trying to animate my app so when I scroll up on one list it closes one of my containers (my horizontal list). The way I had my old code I would always get an error because the text would try to squeeze in the card causing overflow when animating and closing. I am trying to use a fitted box and change it so it works but I keep getting errors in because of my listview builder. I know it seems dumb to have 1 item but it is a theory project and will have multiple items soon. Here is both old and new code.
new - return Expanded(
child: Container(
child: FittedBox(
fit: BoxFit.fill,
alignment: Alignment.topCenter,
child: Row(
children: [
ListView.builder(
physics: NeverScrollableScrollPhysics(),
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 60,
width: 100,
child: Padding(
padding: const EdgeInsets.all(8),
child: Column(
children: <Widget>[
Card(
elevation: 10,
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.white70, width: 1),
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Text("Add Groups"),
),
),
],
)),
);
},
),
],
),
),
),
);
old - return Column(
children: <Widget>[
Padding(
padding:
const EdgeInsets.only(bottom: 1, top: 6, left: 2, right: 1),
child: SizedBox(
height: 60,
child: ListView.builder(
physics: BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics()),
scrollDirection: Axis.horizontal,
itemCount: 1,
itemBuilder: (context, index) {
return new GestureDetector(
child: Container(
width: 100,
child: Card(
elevation: 10,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.white70, width: 1),
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Text("Add Groups"),
),
),
),
onTap: () {
setState(() {
GroupForm().showDialogForm(context, widget.groups);
});
},
);
},
)),
),
],
);
Error for the new code - The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.
The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a
RenderObject, which has been set up to accept ParentData of incompatible type BoxParentData.
Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically,
Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a Align widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
FittedBox ← Container ← Expanded ← Align ← ConstrainedBox ← Container ← AnimatedContainer-[<'1'>]
← FadeTransition ← AnimatedOpacity ← FadeTransition ← ⋯
raja palai
Apr 7, 2021, 9:11:20 AM4/7/21
to Flutter Development (flutter-dev)
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:getwidget/components/carousel/gf_items_carousel.dart';
import 'package:gymApp/Dietician/dietician.dart';
import 'package:gymApp/FitnessCenter/fitnessCenter.dart';
import 'package:gymApp/FitnessCoach/fitnessCoach.dart';
import 'package:gymApp/FitnessTV/fitnessTV.dart';
import 'package:gymApp/profile.dart';
import 'package:responsive/responsive.dart';
class DashboardScreen extends StatefulWidget {
@override
_DashboardScreenState createState() => _DashboardScreenState();
}
class _DashboardScreenState extends State<DashboardScreen> {
// final List<String> imageList = [
// "assets/banner-2.png",
// "assets/banner-2.png",
// "assets/banner-2.png",
// "assets/banner-2.png"
// ];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: SafeArea(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Container(
height: 40.0,
child: Row(
children: <Widget>[
InkWell(
child: Image.asset(
'assets/user.png',
width: 40.0,
height: 40.0,
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProfileDash(),
),
);
},
),
SizedBox(
width: 16.0,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Hi, Amarjeet',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
],
)
],
),
),
SizedBox(
height: 50.0,
),
//////////////////////////// CAROUSEL SECTION //////////////////////////////////
Center(
child: CarouselSlider(
options: CarouselOptions(
height: 180.0,
enlargeCenterPage: true,
autoPlay: true,
aspectRatio: 15 / 9,
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: true,
autoPlayAnimationDuration: Duration(milliseconds: 800),
viewportFraction: 0.8,
),
items: [
Container(
margin: EdgeInsets.all(5.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: AssetImage(
"assets/banner-2.png",
),
fit: BoxFit.cover,
),
),
),
Container(
margin: EdgeInsets.all(5.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: AssetImage(
"assets/banner.png",
),
fit: BoxFit.cover,
),
),
),
Container(
margin: EdgeInsets.all(5.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: AssetImage(
"assets/banner-1.png",
),
fit: BoxFit.cover,
),
),
),
]),
),
SizedBox(
height: 30.0,
),
////////////////////////////// GRID CARDS ///////////////////////////////////////////
Container(
child: Expanded(
child: GridView(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 16.0 / 12.0,
),
children: <Widget>[
Container(
child: InkWell(
child: Stack(
children: <Widget>[
Container(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Image.asset(
'assets/b1.png',
fit: BoxFit.cover,
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(25.0),
child: Container(
alignment: Alignment.bottomLeft,
child: Column(
children: <Widget>[
Container(
child: Text(
"FITNESS",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
// SizedBox(
// height: 10.0,
// ),
Container(
child: Text(
"CENTER",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
)
],
),
),
)
],
)
],
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FitnessCenter(),
),
);
},
),
),
Container(
child: InkWell(
child: Stack(
children: <Widget>[
Container(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Image.asset(
'assets/b2.png',
fit: BoxFit.cover,
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(25.0),
child: Container(
alignment: Alignment.bottomLeft,
child: Column(
children: <Widget>[
Container(
child: Text(
"DIETICIAN",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
// SizedBox(
// height: 10.0,
// ),
],
),
),
)
],
)
],
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FitnessDietician(),
),
);
},
),
),
Container(
child: InkWell(
child: Stack(
children: <Widget>[
Container(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Image.asset(
'assets/b3.png',
fit: BoxFit.cover,
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(25.0),
child: Container(
alignment: Alignment.bottomLeft,
child: Column(
children: <Widget>[
Container(
child: Text(
"FITNESS",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
// SizedBox(
// height: 10.0,
// ),
Container(
child: Text(
"COACH",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
)
],
),
),
)
],
)
],
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FitnessCoach(),
),
);
},
),
),
Container(
child: InkWell(
child: Stack(
children: <Widget>[
Container(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Image.asset(
'assets/b4.png',
fit: BoxFit.cover,
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(25.0),
child: Container(
alignment: Alignment.bottomLeft,
child: Column(
children: <Widget>[
Container(
child: Text(
"FITNESS-TV",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
// SizedBox(
// height: 10.0,
// ),
],
),
),
)
],
)
],
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FitnessTV(),
),
);
},
),
),
],
),
),
),
InkWell(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"FIT SHOP",
style: TextStyle(
color: Colors.black54,
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 30.0,
),
Container(
alignment: Alignment.center,
child: Image.asset(
"assets/banner.png",
fit: BoxFit.cover,
),
),
],
),
),
onTap: () {},
),
SizedBox(
height: 50.0,
),
],
),
),
),
),
//////////////////////// BOTTOM BAR //////////////////////////////////
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
title: Text(
'HOME',
style: TextStyle(
fontSize: 15.0,
color: Colors.blue,
),
),
icon: ImageIcon(
AssetImage('assets/home.png'),
color: Colors.indigo[300],
size: 40.0,
),
),
BottomNavigationBarItem(
title: Text(
'MACEDON',
style: TextStyle(
fontSize: 15.0,
color: Colors.blue,
),
),
icon: ImageIcon(
AssetImage('assets/macedon.png'),
color: Colors.indigo[300],
size: 40.0,
),
),
BottomNavigationBarItem(
title: Text(
'DIETICIAN',
style: TextStyle(
fontSize: 15.0,
color: Colors.blue,
),
),
icon: ImageIcon(
AssetImage('assets/dietician.png'),
color: Colors.indigo[300],
size: 40.0,
),
),
BottomNavigationBarItem(
title: Text(
'COACH',
style: TextStyle(
fontSize: 15.0,
color: Colors.blue,
),
),
icon: ImageIcon(
AssetImage('assets/coach.png'),
color: Colors.indigo[300],
size: 40.0,
),
),
],
),
);
}
}
raja palai
Apr 7, 2021, 9:11:54 AM4/7/21
to Flutter Development (flutter-dev)
how can i responsive this code
Reply all
Reply to author
Forward
0 new messages