I would like to have my list items perform this animation (mp4) when tapped. I tried using AnimatedCrossFade but it requires its two children to be at the same level, e.g. the detail view cross-fades with the ListView not the tapped item. In fact it seems a Hero animation is the only one that can animate across widgets.
I'm having trouble using Hero. Should it wrap the list item? Does it matter if the Widget subtree is significantly different in the Hero source/destination? Also, can Hero animations be used with LocalHistoryRoutes or staggered animations?
Edit
It's now looking like what I need to do is use an Overlay, the hard part there is that I need to add the selected item to the overlay at the same position on screen where it was tapped, then the animation part would be easy. Possibly of use here is a target/follower pattern e.g. CompositedTransformTarget
You can just use Hero widget to make that kind of animation. Here's my example:
and the source code:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new FirstPage(title: 'Color Palette'),
);
}
}
class FirstPage extends StatefulWidget {
FirstPage({Key key, this.title}) : super(key: key);
final String title;
#override
_FirstPageState createState() => new _FirstPageState();
}
class _FirstPageState extends State<FirstPage> {
final palette = [
{'#E53935': 0xFFE53935},
{'#D81B60': 0xFFD81B60},
{'#8E24AA': 0xFF8E24AA},
{'#5E35B1': 0xFF5E35B1},
{'#3949AB': 0xFF3949AB},
{'#1E88E5': 0xFF1E88E5},
{'#039BE5': 0xFF039BE5},
{'#00ACC1': 0xFF00ACC1},
{'#00897B': 0xFF00897B},
{'#43A047': 0xFF43A047},
{'#7CB342': 0xFF7CB342},
{'#C0CA33': 0xFFC0CA33},
];
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Container(
child: new ListView.builder(
itemCount: palette.length,
itemBuilder: (context, index) => new Hero(
tag: palette[index].keys.first,
child: new GestureDetector(
onTap: () {
Navigator
.of(context)
.push(new ColorPageRoute(palette[index]));
},
child: new Container(
height: 64.0,
width: double.infinity,
color: new Color(palette[index].values.first),
child: new Center(
child: new Hero(
tag: 'text-${palette[index].keys.first}',
child: new Text(
palette[index].keys.first,
style: Theme.of(context).textTheme.title.copyWith(
color: Colors.white,
),
),
),
),
),
),
)),
),
);
}
}
class SecondPage extends StatelessWidget {
final Map<String, int> color;
SecondPage({this.color});
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Color'),
),
body: new Hero(
tag: color.keys.first,
child: new Container(
color: new Color(color.values.first),
child: new Center(
child: new Hero(
tag: 'text-${color.keys.first}',
child: new Text(
color.keys.first,
style:
Theme.of(context).textTheme.title.copyWith(color: Colors.white),
),
),
),
),
),
);
}
}
class ColorPageRoute extends MaterialPageRoute {
ColorPageRoute(Map<String, int> color)
: super(
builder: (context) => new SecondPage(
color: color,
));
#override
Widget buildTransitions(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation, Widget child) {
return FadeTransition(opacity: animation, child: child);
}
}
Someone wrote an amazing dart-package for just this purpose: https://pub.dev/packages/morpheus#-readme-tab-
All you then need to do is use the MorpheusPageRoute and the package handles the rest.
...
Navigator.push(
context,
MorpheusPageRoute(
builder: (context) => MyWidget(title: title),
),
);
...
I'd just cheat and wrap the whole thing in a Stack - bottom layer would be a page with the AppBar, and the top layer would be transparent until painted on.
onTap, duplicate ListTile onto the top surface, and then a Hero animation would fill the full screen. It's not very elegant, but the framework doesn't (yet) provide for covering the AppBar easily, so having a canvas ready to be painted on for other tricky animations might be resourceful.
I'm unable to comment or edit Lucas' post (new account) but you also need to provide the parentKey of the widget where the animation is to begin:
final widgetKey = GlobalKey();
...
ListTile(
key: widgetKey,
title: Text('My ListItem'),
onTap: () => Navigator.push(
context,
MorpheusPageRoute(
builder: (context) => MyNewPage(),
parentKey: widgetKey,
),
),
),
https://pub.dev/packages/morpheus
Related
I'm new to flutter, and I'm trying to divide the screen into three parts, here's my attempt:
class Homepage extends Statelesswidget {
const HomePage({Key? key}): super (key: key);
#override
Widget build(BuildContext context) {
return Row(children: [
const Expanded(
flex: 1,
child: Scaffold(
body: Center(child: Text("Left")),
), // Scaffold
), // Expanded
Expanded(
flex: 2,
child: Scaffold(
appBar: AppBar(),
body: const Center(child: Text("Middle")),
), // Scaffold
), // Expanded
const Expanded(
flex: 1,
child: Scaffold(
body: Center(child: Text("Right")),
), // Scaffold
) // Expanded
]);
}
}
and main.dart looks like:
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return const MaterialApp(
home: HomePage(),
debugShowCheckedModeBanner: false,
);
}
}
Here's the result:
I got these vertical lines out of nowhere, how can I get rid of them?
Welcome to Flutter 💙
These lines are the boarders of the Scaffold widget which you are using inside each Expanded widget in the row.
Now intead of looking for a way to remove these border lines, I suggest you to learn more about the Scaffold widget in Flutter
Since you are new to Flutter, you have to be aware with the goal of using Scaffold widget, which is stated in the official docs as the following:
Implements the basic material design visual layout structure.
This class provides APIs for showing drawers and bottom sheets.
So in other words, we use the Scaffold Widget as a basic canvas for the screen with some properties to implement popular layout designs, such as AppBar, BottomNavigationBar, FloatingActionButton, etc...
Then, we use it once in the screen to set the basic layout, and does not required to be used multiple times for each sub part of the screen
Then your HomePage code should be something like:
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Row(children: [
const Expanded(
flex: 1,
child: Center(child: Text("Left")),
), // Expanded
Expanded(
flex: 2,
child: Column(
children: [
AppBar(),
const Expanded(
child: Center(child: Text("Middle")),
),
],
),
),
const Expanded(
flex: 1,
child: Center(child: Text("Right")),
)
]),
);
}
}
// I want to use a background image for every page in my Flutter app. For the moment, I'm using a
// separate class BaseLayout to set up the background image. However, flutter does not reflect the
// described the background image on the device.
// Is there a better way to reflect the background image?
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter_svg/flutter_svg.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: CarouselSlider(
options: CarouselOptions(height: 240.0),
items: [1, 2, 3, 4, 5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(color: Colors.amber),
child: Text(
'text $i',
style: TextStyle(fontSize: 16.0),
));
},
);
}).toList(),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
class BaseLayout extends StatelessWidget {
#override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/logo1.svg"), fit: BoxFit.cover),
),
child: Center(child: FlutterLogo(size: 300)),
);
}
}````
You have to make your scaffold background transparent, If you are going to use a Base Layout as a parent to all your pages.
You can use scaffoldBackgroundColor property of Scaffold widget to make it transparent.
Or better you can define it your Theme data while you declare your MaterialApp.
Sample Code:
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
scaffoldBackgroundColor: Colors.transparent, // To Make scaffold background Transparent
appBarTheme: AppBarTheme(color:Colors.transparent // To Make appbar background transparent.
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
Then on your BaseLayout class:
class BaseLayout extends StatelessWidget {
const BaseLayout({this.child});
final Widget child;
#override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/logo1.svg"), fit: BoxFit.cover),
),
child: Center(child: child),
);
}
}
Now you can wrap any Scaffold widget of your app with this BaseLayout class you just created and it's background image will be same across whole application.
I tried to wrap it in a Hero widget, as that should achieve what I want. This works with BottomNavigationBar, but not with BottomAppBar, which gives this error: Scaffold.geometryOf() called with a context that does not contain a Scaffold. I tried to give it a context by using Builder, but that did not work either. Here is a sample app to showcase the behaviour:
void main() {
runApp(
MaterialApp(
home: PageOne(),
),
);
}
Widget _bottomNavigationBar() {
return BottomNavigationBar(items: [
BottomNavigationBarItem(icon: Icon(Icons.menu), title: Text('menu')),
BottomNavigationBarItem(icon: Icon(Icons.arrow_back), title: Text('back')),
]);
}
Widget _bottomAppBar() {
return BottomAppBar(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(icon: Icon(Icons.menu), onPressed: null),
IconButton(icon: Icon(Icons.arrow_back), onPressed: null),
],
),
);
}
class PageOne extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: Hero(
tag: 'bottomNavigationBar',
child: _bottomAppBar(),
),
body: Center(
child: IconButton(
iconSize: 200,
icon: Icon(Icons.looks_two),
onPressed: () => Navigator.push(
context,
MaterialPageRoute(builder: (context) => PageTwo()),
),
),
),
);
}
}
class PageTwo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: Hero(
tag: 'bottomNavigationBar',
child: _bottomAppBar(),
),
body: Center(
child: IconButton(
iconSize: 200,
icon: Icon(Icons.looks_one),
onPressed: () => Navigator.pop(context),
),
),
);
}
}
The problem seems to be the animation that is used with the Navigation stack. Therefore, getting rid of the animation during the page load will stop this animation. I added the PageRouteBuilder to the PageOne class in your example to get rid of the Navigation stack animation. Use the code below to replace the PageOne class from your example.
class PageOne extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: _bottomAppBar(),
body: Center(
child: IconButton(
iconSize: 200,
icon: Icon(Icons.looks_two),
onPressed: () => Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (context, anim1, anim2) => PageTwo(),
transitionsBuilder: (context, anim1, anim2, child) =>
Container(child: child),
),
),
),
),
);
}
}
There are additional ways to control the animation for Navigation here
(Oh, and I got rid of the Hero() widget)
I have solved this by wrapping the Row with a Hero widget in BottomAppBar. This still allows page transitions, and does not animate the BottomAppBar as intended.
BottomAppBar(
child: Hero(
tag: 'bottomAppBar',
child: Material(
child: Row(
...
),
),
),
);
However, this has laggy animations when using a CircularNotchedRectangle.
Is there any way to change the default animation when navigating to/from a page in Flutter?
You can use PageRouteBuilder.
The following example shows FadeTransition when you navigate to second screen.
Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (_, __, ___) => Page2(),
transitionDuration: Duration(seconds: 2),
transitionsBuilder: (_, a, __, c) => FadeTransition(opacity: a, child: c),
),
);
If you're using go_router:
GoRoute(
path: '/page2',
pageBuilder: (_, state) {
return CustomTransitionPage(
key: state.pageKey,
child: Page2(),
transitionDuration: Duration(seconds: 2),
transitionsBuilder: (_, a, __, c) => FadeTransition(opacity: a, child: c),
);
},
)
and then:
context.go('/page2');
You can subclass MaterialPageRouteand override buildTransitions.
Eg:
class MyCustomRoute<T> extends MaterialPageRoute<T> {
MyCustomRoute({ WidgetBuilder builder, RouteSettings settings })
: super(builder: builder, settings: settings);
#override
Widget buildTransitions(BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child) {
if (settings.isInitialRoute)
return child;
// Fades between routes. (If you don't want any animation,
// just return child.)
return new FadeTransition(opacity: animation, child: child);
}
}
to use :
new RaisedButton(
child: new Text('Goto'),
onPressed: (){
Navigator.push(
context,
new MyCustomRoute(builder: (context) => new SecondPage()),
);
}),
Replace fade transition with your animation
You can achieve this by using CupertinoPageRoute.
Please check the below code.
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Transition Animation Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new FirstPage(),
);
}
}
class FirstPage extends StatefulWidget {
#override
_FirstPageState createState() => new _FirstPageState();
}
class _FirstPageState extends State<FirstPage> {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('First Page'),
),
body: new Center(
child: new RaisedButton(
child: new Text('Goto Second Page'),
onPressed: () {
Navigator.of(context).push(new SecondPageRoute());
},
),
),
);
}
}
class SecondPageRoute extends CupertinoPageRoute {
SecondPageRoute()
: super(builder: (BuildContext context) => new SecondPage());
// OPTIONAL IF YOU WISH TO HAVE SOME EXTRA ANIMATION WHILE ROUTING
#override
Widget buildPage(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation) {
return new FadeTransition(opacity: animation, child: new SecondPage());
}
}
class SecondPage extends StatefulWidget {
#override
_SecondPageState createState() => new _SecondPageState();
}
class _SecondPageState extends State<SecondPage> {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Second Page'),
),
body: new Center(
child: new Text('This is the second page'),
),
);
}
}
Some play-around with animation
// OPTIONAL IF YOU WISH TO HAVE SOME EXTRA ANIMATION WHILE ROUTING
#override
Widget buildPage(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation) {
return new RotationTransition(
turns: animation,
child: new ScaleTransition(
scale: animation,
child: new FadeTransition(
opacity: animation,
child: new SecondPage(),
),
));
}
I have done this by providing my own builders with custom map in pageTransitionsTheme for the app level theme.
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Startup Name Generator Tile',
home: RandomWords(),
theme: new ThemeData(
primaryColor: Colors.white,
// Add the line below to get horizontal sliding transitions for routes.
pageTransitionsTheme: PageTransitionsTheme(builders: {TargetPlatform.android: CupertinoPageTransitionsBuilder(),}),
),
);
}
}
Of course, I didn't add a map entry for ios as I use only android for TargetPlatform.
You can also check out page_transition package from https://pub.dev/packages/page_transition. This package contains the following different transitions.
fade,
rightToLeft,
leftToRight,
upToDown,
downToUp,
scale (with alignment),
rotate (with alignment),
size (with alignment),
rightToLeftWithFade,
leftToRightWithFade
the simplest way I figured, is to use MaterialPageRoute normally just add: fullscreenDialog: true, inside MaterialPageRoute()
After adding firebase_admob plugin and getting it up and running I noticed it overlays the fab and navigation drawer. I've fixed the fab using persistentFooterButtons but I can't seem to find a workaround for the navigation-drawer. Any help is much appreciated.
Find below a sample implementation, to recreate the issue in flutter:
import 'package:flutter/material.dart';
import 'package:firebase_admob/firebase_admob.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Firebase AdMob',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'AdMob Test App'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
BannerAd myBanner;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
void initState() {
super.initState();
myBanner = new BannerAd(
// Replace the testAdUnitId with an ad unit id from the AdMob dash.
// https://developers.google.com/admob/android/test-ads
// https://developers.google.com/admob/ios/test-ads
adUnitId: BannerAd.testAdUnitId,
size: AdSize.smartBanner,
targetingInfo: new MobileAdTargetingInfo(
// gender: MobileAdGender.unknown
),
listener: (MobileAdEvent event) {
print("BannerAd event is $event");
},
);
myBanner..load()..show(
// Banner Position
anchorType: AnchorType.bottom,
);
}
#override
void dispose() {
myBanner?.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
drawer: new Drawer(),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text('You have pushed the button this many times:'),
new Text('$_counter', style: Theme.of(context).textTheme.display1),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
I'm a little late to this but had same problem.
My nav drawer lives in a scrollable container with a fixed height so that it stops above the add and is scrollable. May not be perfect answer but works for me.
I had the same problem and my solution was the same Added by #moehagene. I added an empty item to the bottom of the drawer with the height of the Ad, so the drawer becomes scrollable when there is not enough space and the Ad is showing. I think this is reasonable. Code below:
return Drawer(
// Add a ListView to the drawer. This ensures the user can scroll
// through the options in the drawer if there isn't enough vertical
// space to fit everything.
child: Column(
children: <Widget>[
Expanded(
child: Container(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
_Item1,
_Item2,
_Item3,
_Item4,
model.isShowingAds ? _emptySpaceItem : null,
],
),
),
),
],
),
);