Hello,
i want to Animate a Page, when the Icon in the Appbar is pressed in Flutter.
I have a code for the Animation, but then the code is not in the Appbar!
Furthermore I have a code for the Context which should be displayed on the page.
This Is my Animation Code:
<pre>class HomePage extends StatefulWidget {
@override
_HomePageState createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
double xoffSet = 0;
double yoffSet = 0;
double angle = 0;
bool isOpen = false;
bool isPlaying = false;
@override
Widget build(BuildContext context) {
return AnimatedContainer(
transform: Matrix4Transform()
.translate(x: xoffSet, y: yoffSet)
.rotate(angle)
.matrix4,
duration: Duration(milliseconds: 250),
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.blue[200],
borderRadius: isOpen
? BorderRadius.circular(10)
: BorderRadius.circular(0)),
child: SafeArea(
child: Stack(
children: [
!isOpen
? IconButton(
icon: Icon(
Icons.menu,
color: Color(0xFF1f186f),
),
onPressed: () {
setState(() {
xoffSet = 150;
yoffSet = 80;
angle = -0.2;
isOpen = true;
});
secondLayerState.setState(() {
secondLayerState.xoffSet = 122;
secondLayerState.yoffSet = 110;
secondLayerState.angle = -0.275;
});
})
: IconButton(
icon: Icon(Icons.arrow_back_ios,
color: Color(0xFF1f186f)),
onPressed: () {
if (isOpen == true) {
setState(() {
xoffSet = 0;
yoffSet = 0;
angle = 0;
isOpen = false;
});
secondLayerState.setState(() {
secondLayerState.xoffSet = 0;
secondLayerState.yoffSet = 0;
secondLayerState.angle = 0;
});
}
}),
Center(
child: Image.asset(
"assets/avatar.png",
height: MediaQuery.of(context).size.height / 2,
),
),
],
),
)));
}
}
This is My other Code, which should be part of the Flutter-Page:
<pre>class GnewsView extends StatelessWidget {
final StoryController controller = StoryController();
Widget _buildHighlights(List<Highlight> highlights) {
final stories = highlights.map<StoryItem>((it) {
return StoryItem.inlineImage(
url: it.image,
caption: Text(
it.headline,
style: TextStyle(
backgroundColor: Colors.black54,
fontSize: 16,
color: Colors.white,
),
),
controller: controller,
roundedTop: true,
);
}).toList();
return StoryView(
storyItems: stories,
repeat: true,
inline: true,
progressPosition: ProgressPosition.bottom,
controller: controller,
);
}
Widget _buildCoverageButton() {
return Builder(
builder: (context) {
return Material(
color: Colors.blueAccent,
borderRadius: BorderRadius.vertical(bottom: Radius.circular(8)),
child: InkWell(
onTap: () {},
child: Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.vertical(bottom: Radius.circular(8))),
padding: EdgeInsets.symmetric(vertical: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.arrow_forward,
color: Colors.white,
),
SizedBox(
width: 16,
),
Text(
"View full coverage",
style: TextStyle(fontSize: 16, color: Colors.white),
),
],
),
),
),
);
},
);
}
Widget _buildExtra() {
return ListTile(
leading: Text("1"),
title: Text(
"Galaxy S20 Ultra teardown video shows superior periscope zoom",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 8,
),
Text(
"2 days ago • TechCatch.org",
style: TextStyle(
color: Colors.grey,
),
)
],
),
);
}
Widget _buildExtra2() {
return ListTile(
leading: Text("2"),
title: Text(
"Bill Gates steps down from Microsoft board, and others",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 8,
),
Text(
"2 days ago • WindoorsInsider",
style: TextStyle(
color: Colors.grey,
),
)
],
),
);
}
Widget _buildNews(Gnews news) {
return ListView(
padding: EdgeInsets.all(16),
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(
Icons.book,
color: Colors.blue,
),
SizedBox(
width: 16,
),
Expanded(
child: Column(
children: <Widget>[
Text(
news.title,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
Text(
"Bloobegg News",
style: TextStyle(
color: Colors.grey,
),
)
],
crossAxisAlignment: CrossAxisAlignment.start,
),
)
],
),
SizedBox(
height: 16,
),
SizedBox(
height: 250,
child: _buildHighlights(news.highlights),
),
_buildCoverageButton(),
SizedBox(
height: 16,
),
_buildExtra(),
SizedBox(
height: 16,
),
_buildExtra2(),
],
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.white,
title: Text(
"Google News",
style: TextStyle(
color: Colors.black,
fontSize: 16,
),
),
leading: IconButton(
icon: Icon(
Icons.arrow_back,
color: Colors.black,
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
body: FutureBuilder(
builder: (context, snapshot) {
if (snapshot.hasData) {
return _buildNews(snapshot.data);
}
if (snapshot.hasError) {
return ErrorView();
}
return Center(
child: SizedBox(
width: 40,
height: 40,
child: CircularProgressIndicator(),
),
);
},
future: Repository.getNews(),
),
);
}
}
Thank you very much for your help, i dont know how to make the Widgets working together.
What I have tried:
I am Flutter beginner, but i dont know how to solve this problem, i am very thankful for your help, i dont found a working way in the internet.