I am using animated splash screen, but my page transition does not working.
Widget build(BuildContext context) {
return AnimatedSplashScreen(
splash: Image.asset(
'lib/logo/MedicteLogo-4a2e31cd2358bb08ff8d12acb2761357.png'),
nextScreen: HomePage(),
splashTransition: SplashTransition.scaleTransition,
pageTransitionType: PageTransitionType.topToBottomJoined,
);
}
try import this code. I succeeded after importing the code
import 'package:page_transition/page_transition.dart';
I'm also having the same problem here "PageTransition" is not working at all, after duration of splash screen finishes it removes splash screen without an PageTransition and shows next screen.
I think it has something to do with my Android version which is Android 12
Related
#override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(statusBarColor: Colors.white));
return MaterialApp(
I used this code to change the status bar color on one screen, when I nevigate to the next screen I have a different color on that using the same lines of code. But the problem is that when I navigate back to this page it doesn't change it back to white, it only changes when the page is loaded initally. Please guide me.
I'm working on a Flutter app and have decided to introduce a splash screen in the same. To navigate to the home screen from the splash screen, normally we use Navigator. But there is one issue that I find in the Navigator method. Whenever i'm popping or pushing a screen, there is a visible navigation, i.e. I can see the screen moving left, right, up or down. What I want to achieve, is that the splash screen should disappear instead of sliding away from the screen. How can I achieve this?
You have to add native splash screen, if you don't want that visible navigation. To add splash screen in your app properly. Please follow the guide: Creating native splash screen
If you are feeling lazy, you can just use the following package : Splash Screen Package. This package is easy to use just read the documentation before installing.
You can use this package flutter_native_splash: ^2.0.5
This package will provide you native splash screen for your apps.
But if you want to disappear your current screen and go to next screen you can use this class custom_route.dart. This class provide you an animation like disappear.
import 'package:flutter/material.dart';
class FadePageRoute<T> extends MaterialPageRoute<T> {
FadePageRoute({
required WidgetBuilder builder,
RouteSettings? settings,
}) : super(
builder: builder,
settings: settings,
);
#override
Duration get transitionDuration => const Duration(milliseconds: 600);
#override
Widget buildTransitions(
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) {
if (settings.name == "/auth") {
return child;
}
return FadeTransition(
opacity: animation,
child: child,
);
}
}
and finally
onPressed: () {
Navigator.of(context).push(FadePageRoute(
builder: (context) => YourScreen(),
));
},
I have an app with lots of Lottie animations. They work fine in a Windows UWP app and AirBnB sample Android app. Also look fine in lottiefiles.com online test tool.
But they are glitchy in Flutter using Lottie for Flutter package. Not all of them, but many, maybe around a third.
Full source code below, you can try for yourself.
Glitches are either frame overlaps or blinking, as if there is a gap between frames.
Glitches are consistent, i.e. always happen in the same place, so does not seem like a performance issue.
Also, they are not happening between repeats, but in the middle of the animation, so again not an application issue but seems to be the issue with how they are rendered.
I have tried loading them as composition from memory with a controller. I have also tried a vanilla asset load to rule out issues with my implementation, and they are behaving the same. The issue appears both in the emulator and the actual phone. So it seems to me it is not caused by the way I implemented but by the Lottie package itself, or perhaps an issue with Lottie JSON that for some reason only affects Android.
Full example is below. Just paste this into main.dart and add dependency to yaml: lottie: ^1.2.1.
import 'package:flutter/material.dart';
import 'package:lottie/lottie.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(),
darkTheme: ThemeData.dark(),
themeMode: ThemeMode.dark,
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Lottie Test"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Lottie.network(
'https://assets6.lottiefiles.com/packages/lf20_uz92k22x.json'),
),
],
),
),
);
}
}
Try adding frameRate: FrameRate.max like stated below.
Expanded(
child: Lottie.network('https://assets6.lottiefiles.com/packages/lf20_uz92k22x.json',
frameRate: FrameRate.max,
),
),
this will render the Lottie animation with the same frame rate of that of the app. In Lottie plugin it will render the json as per the frame rate mentioned in the json file. An animation encoded with a 25 FPS will only be painted 25 times per seconds even though the AnimationController will invalidate the widget 60 times per seconds. Hence this framerate was introduced from Lottie 0.6.0
I use Lottie for Flutter on my applications and it works well also on emulator or on low-performance phones. The problem can be related to bad converted animations, or you can try to use Lottie.asset(yourjson) to avoid potential network fetch issues.
According to the official package documentation
For Flutter Web, run the app with: flutter run --web-renderer canvaskit
Works fine for me in the latest version: lottie: ^1.2.1
I recently made an animation using Flare.
I used flare_splash_screen package to use that animation as a splash screen in my flutter app.
The problem I am facing is that I am unable to make the animation full screen on devices with notches and bezel-less displays.
The animation appears fullscreen on devices like Google Pixel XL and iPhone SE. but not on devices like iPhone 11 Pro, iPhone 11 Pro Max.
The size of my ArtBoard is 1080x1920
I have tried everything like
Using Expanded
Playing with weight and height
Using a container and resizing that
but no matter what I do the animation is in the middle of display and never fullscreen.
any help would be truly appreciated
Here is my code :
class Animation extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SplashScreen.navigate(
name: 'assets/animations/mablac_attire.flr',
next: (_) => AttireScreen(),
until: () => Future.delayed(Duration(
seconds: 1,
milliseconds: 45,
)),
startAnimation: 'Opening',
);
}
}
I want a standard AppBar when the app starts, however, once the user begins scrolling I want the app bar to slide up and off the screen. However, when that happens, the status bar (on iOS) doesn't have a background. I don't want to set a constant background directly to the status bar using something like flutter_statusbarcolor because that leaves a solid color, which isn't a widget.
The only solution I have right now is to just keep the AppBar pined.
However, what I really want to do is what Google News does. The AppBar slides up almost all the way, however, it stays under the app bar with some opacity.
How Google News does it:
Is there any way to do this with Flutter and SliverAppBar without doing it a hacky way? The only thing I'm thinking is doing it with a stack, however, how would I know how to keep it under the status bar, as Android already has some opacity under the status bar.
Scroll widgets in flutter have controllers that inform what's going on with the scroll. You can get how much the sliver has been scrolled and change it's opacity, content and size accordingly. It's not going to be simple though, but take a look at ScrollController, used by the CustomScrollView.
I used OrientationBuilder widget to listen to changes in orientation, as when there are changes to the orientation the status bar hight can change.
Then I used FlutterStatusbarManager package to get the height of the status bar. FlutterStatusbarManager.getHeight is a future so it needed to be wrapped with a FutureBuilder
Here is the full example code
import 'package:flutter/material.dart';
import 'package:flutter_statusbar_manager/flutter_statusbar_manager.dart';
class FixedStatusbarBackground extends StatelessWidget {
final Widget child;
const FixedStatusbarBackground({Key key, this.child}) : super(key: key);
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
child,
OrientationBuilder(
builder: (context, Orientation orientation) => FutureBuilder<double>(
future: FlutterStatusbarManager.getHeight,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Container(
height: snapshot.data,
color: Theme.of(context)
.appBarTheme
.color
.withOpacity(.7) //Colors.white.withOpacity(.7),
);
} else {
return Container();
}
}),
),
],
);
}
}
The child widget that is passed in is the entire CustomScrollView.