I have three screens.
FirstScreen, SecondScreen and a GreenScreen,
im using custom navigation in my navigation routes like so (im using named routes),
case secondScreenUIRoute:
return Platform.isIOS
? CupertinoPageRoute(
builder: (context) => const SecondScreen())
: CustomPageRoute(
builder: (context) => const SecondScreen());
my green screen looks like so
class GreenScreen extends StatelessWidget {
const GreenScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: CustomColors.greenLight,
);
}
}
My basic idea was to have this GreenScreen in between FirstScreen and SecondScreen on navigation(from first to second), but as a fade in fade out effect. Plainly I like to give the user an impression like, when going from FirstScreen to SecondScreen, there seems to be a subtle animation where a green screen is faded in and faded out before reaching SecondScreen.
how Can i achieve this in flutter?
you can use animations package:
https://pub.dev/packages/animations#fade-through
This package contains pre-canned animations for commonly-desired effects. The animations can be customized with your content and dropped into your application to delight your users.
this is an example source code of using the package:
https://github.com/flutter/packages/tree/master/packages/animations/example
if you want to learn from youtube, you can learn here:
https://www.youtube.com/watch?v=3GMq45zRVLo
I've used this package before, and I recommend this package because it's easy to use and this package was made by the flutter team
Related
I have a app that looks like the picture above.
When i swipe right or left, page switches along with the pageview content. but NOT the image part, it stays still.
When i implement pull to refresh on this case, the gap opens above image part showing progress indicator and refreshes.
I want the refresher crack open between image and content part, how do i achieve this?
thank you so much for reply in advance, you are the hero.
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
const Expanded(
child: SizedBox(height: 200), //The 'Image Part'
),
SmartRefresher(
child: PageView.builder(itemBuilder: (context, state) => Column(
children:[SizedBox(height:200),PageContent()], itemCount: 3),//The 'Content Part'
)
],
));
}
}
Example code added above, this represents what i would like to implement, I want the refresher only accessible inside PageContent()
but i could not because it contains Column inside
seems like an issue with your stack.
if you want the image part to also follow the swipe it has to be within the pageview.builder.
For the refresh, under pageview.builder wrap the content part in the pull-to-refresh widget but not the image.
This is possibly caused by the Stack widget
Change your Stack to a Column
Wrap your SmartRefresher with and Expanded widget for your ListviewBuilder to take the remaining space in vertical axis. You will have an unbounded high error otherwise
Set the shrinkwrap of your ListviewBuilder to true for it to build your list elements on demand
That's it! ☑️
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(),
));
},
Can I use BlocBuilder directly in BlocProvider and have an access to a state in whole tree or should I use BlocBuilder on every widget separately if I plan to change it via state ?
Right now I have this construction on a top level and inject state to lower parts of the tree:
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MultiBlocProvider(
providers: [
BlocProvider<NavigationCubit>(create: (context) => NavigationCubit())
],
child: BlocBuilder<NavigationCubit, NavigationState>(
builder: (context, state) {
return WillPopScope(
onWillPop: () async => false,
child: const MaterialApp(
home: RootContainer(state),
),
);
},
),
);
}
}
well yes You can but its not recommended to do it in certain way
for small project and prototype ? sure
for large project ? big no
normally You want to separate things for as much as you can because like the name of it Blocbuilder it will rebuild widgets 'INSIDE' of it
so If you wraps with that many widgets
example is like for post widget
if you tap like Iconbutton, widget that need rebuild is just iconButton right but if you wrap a entire a post it will re render in User screen in 60 fps(standard)
so if you doing that way dnt do it again, because user experience will be awful when project goes large
tldr: its like setstate with extra steps if u doing that way
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.
In native android development, it is common to use FragmentTransaction to create a navigation animation, where the actionBar's position stays fixed (but actionBar's content changed), and the fragment beneath actionBar performs a transition animation (like slide in or out).
To put it simple, the AppBar and the body performs different transition animation. In flutter, what is the best practice to create such animation?
Currently I can think of a solution of using a navigation in Scaffold.body and using Stream + StreamBuilder to start AppBar redraw. Something like the following code.
Scaffold(
appBar: StreamBuilder<Int>(
stream: Bloc.of(context).currentFragmentId
builder: //Some logic to decide which AppBar is appropriate
),
body: Navigator(
//Navigation between fragments
),
)
But this is really weird. So is there a best practice to do this? Please let me know!
Well, since there is currently no answer availble. I'm going to share my solution here, though it is not so elegant.
The solution is to wrap AppBar in a Hero widget. Since Scaffold only takes a PreferedSize widget as an appbar, some customization is required.
class HeroAppBar extends StatelessWidget implements PreferredSizeWidget {
//...
#override
final Size preferredSize = Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0));
//...
#override
Widget build(BuildContext context) {
return Hero(
tag: tag,
child: AppBar(
//...
),
);
}
}
And make sure your Navigator implemented the HeroController. (Default Navigator has already implemented it)