I have some cards in gridview. I want ontap of any card, they should expand to whole screen.
this are the cards,
HAVE TO DELETE IMAGES BECAUSE OF CONFIDENTIALITY
I want them to expand to whole screen like this,
what I have tried,
-> I have tried using OpenContainer widget,
-> custom hero animation
but they both use pageroute but I want them to do it without the page route because there is some content like appbar which would be same for both screen so I don't want them rebuild it everytime user tap on any of the card.
if anyone can lead me to right direction that would be awesome
Take a look at this package: https://pub.dev/packages/animations
if you don't like using pageroute you can just switch your widget using StatefulWidget and Visibility.
And wrap your Card with InkWell then use the onTap / onPressed callback to set change the state so the Visibility will start work now
Create a function
Widget transition(Widget _child) {
return PageTransitionSwitcher(
duration: const Duration(milliseconds: 800),
transitionBuilder: (
Widget child,
Animation<double> animation,
Animation<double> secondaryAnimation,
) {
return SharedAxisTransition(
child: child,
animation: animation,
secondaryAnimation: secondaryAnimation,
transitionType: SharedAxisTransitionType.horizontal,
);
},
child: _child,
);
}
Add it on your scaffold:
transition(child:condition ? widget_1 : widget_2);
I'm not 100% sure what you meant by expand to the whole screen, but you probably need to use the Hero() widget, wrap each widget you want to expand with a Hero() widget and give it a tag: 'spo2' for example, make a new screen for the second image, wrap each card with a Hero() and the same tag in the previous screen for the expanded card.
For further reading check out https://api.flutter.dev/flutter/widgets/Hero-class.html
Try using a dialogue and animating the opening.
Related
I am using the flutter package AnimatedTextKit which displays some animated text.
(https://pub.dev/packages/animated_text_kit)
An AnimatedTextKit is a StatefulWidget and builds a GestureDetector :
#override Widget build(BuildContext context) {
final completeText = _currentAnimatedText.completeText(context);
return GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: _onTap,
child: _isCurrentlyPausing || !_controller.isAnimating
? completeText
: AnimatedBuilder(
animation: _controller,
builder: _currentAnimatedText.animatedBuilder,
child: completeText,
),
);
}
I wrap the AnimatedTextKit into a Card, and also show a yellow triangle at the bottom of the Card when the text is fully displayed :
Card containing an AnimatedTextKit
When I tap on the text : it's fine since the AnimatedTextKit GestureDetector detects the tap. But when I tap on the yellow triangle just below, because I tap outside the AnimatedTextKit widget, the tap is not detected, which is normal.
Is there a clean way to make a tap made anywhere on the Card be interpreted as a tap on the AnimatedTextKit ?
I have looked at these answers : How to pass Taps to widgets below the top widget? and How do I programmatically simulate onTap on a button in Flutter? but I feel like I'm not able to apply the proposed solutions since I cannot modify the AnimatedTextKit library code.
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 am using a bottom navigation bar with 5 items and for each widget I should load some data from server , I want to have fade in and fade out between items but I don't know how? , because I think items are not a new pages that I implement route fade transitions.
also I defined a futureBuilder for each Items to load it's data
It's possible to do sth in futureBuilder's ConnectionState.waiting but it doesn't have fade transition and the transition is jumping
also i check interet connection with connectivity plugin
I get into trouble to handle them because I am almost new to flutter !
and i am wonder to know what is the most powerful way to handle it.
Thanks
Maybe AnimatedSwitcher is what you are looking for, it adds an implicit animation to its child, so that whenever you call setState() to change its child, it automatically starts a fade-in/fade-out animation between them. Check out this video from the Widget of the Week series:
AnimatedSwitcher from Widget of the Week
Another possibility is AnimatedOpacity, that can achieve a similar behaviour by changing its child's opacity. Here is a reference to the documentation on AnimatedOpacity widget:
AnimatedOpacity from Flutter dev documentation
I know that's a really old question, but I solved using something like that:
Widget dynWidget = CircularProgressIndicator();
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: future,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
dynWidget = Text('Content loaded!');
}
return AnimatedSwitcher(
duration: Duration(seconds: 1), child: dynWidget);
});
}
I want to translate a widget vertically as the user drags. I tried implementing it using two options:
AnimationController
Value notifier.
So when I use the animation controller the scroll is not very smooth and the widget is being scroll after a delay even when the duration of the animation is 1 milliseconds.
When I implement it using value notifier it is much better but still not as smooth as the ListView scroll. Is there a better way to scroll\translate a widget on user drag?
I found a better solution for this. Although it can be achieved using Gesture detector but that is not as smooth. Flutter has another wonderful widget for this and that is DraggableScrollableSheet.
If you want container for a Scrollable list that responds to drag gestures by resizing the scrollable until a limit is reached, and then scrolling this is the widget you should be using.
DraggableScrollableSheet(
initialChildSize: .70,
minChildSize: .70,
builder: (BuildContext context, ScrollController scrollcontroller){
scrollcontroller.addListener((){
});
return Container(
child: ListView.builder(
controller: scrollcontroller,
itemCount: widget.songs.length,
itemBuilder: (BuildContext context, int index) {
return buildSongRow(widget.songs[index]);
})
);
})
The above list will be place at the 70 percent of the height of the screen initially. When you scroll up it drags the list up to the top and then the list scrolls as a normal listview. When you reach the top while scrolling, the list drags down to the initial position(70 percent of height).
I'm trying to understand the class Navigator.
A Navigator Route seem to always return a new widget but what if I want to manage the TabBar and TabBarView so that each Tab when tapped or swipe on, will be pushed to the Navigator stack, I don't find a what to do that.
On a more general case, can I react to a route change without creating a new widget but instead taking another action like scrolling to a specific item in a listView?
I've tried recreating the entire app structure every time but doing this way I don't have the nice default animation and, also, doesn't seem a good approach to me.
You can use WillPopScope widget and its onWillPop to catch the back button pressure and handle it yourself. Find more info here https://docs.flutter.io/flutter/widgets/WillPopScope-class.html
On a more general case, can I react to a route change without creating
a new widget but instead taking another action like scrolling to a
specific item in a listView?
This looks more specific rather than general. However, you do need to set a ScrollController in your ListView and let it scroll the list for you to the desired point. A simple example function returning to top:
class MyFancyClass extends StatelessWidget{
...
ScrollController _scrollController;
...
#override
Widget build(BuildContext Context){
return ....
new ListView(
...
controller: _scrollController,
...
}
void _toTop() {
_scrollController.animateTo(
0.0,
duration: const Duration(milliseconds: 500),
curve: Curves.ease,
);
}
Check https://docs.flutter.io/flutter/widgets/ScrollController-class.html for more details and behaviors. In case you want the back button to bring you to the top:
Widget build(BuildContext context) {
return new WillPopScope(
onWillPop: _onTop,
child:
...
),
);
}
Concerning the tab behavior I suggest you to read https://docs.flutter.io/flutter/material/TabController-class.html to better understand how to implement what you have in your mind.