Change AppBar title value on carousel change without setstate - flutter

I'm developing a gallery app looking like whatsapps photo gallery. I want the appbar title change when my carousel slider changes. I tried it with setstate but because I show the carouselslider in a showdialog, it doesn't work and I think it can be cause performance issues. I use getx in the project and is there any way to do it without setstate?
Here is my AppBar widget
showGeneralDialog(
context: context,
barrierDismissible: true,
barrierLabel: MaterialLocalizations.of(context)
.modalBarrierDismissLabel,
barrierColor: Colors.black45,
transitionDuration:
const Duration(milliseconds: 200),
pageBuilder: (BuildContext buildContext,
Animation animation,
Animation secondaryAnimation) {
return Dismissible(
direction: DismissDirection.vertical,
key: const Key('key'),
onDismissed: (_) => Navigator.of(context).pop(),
child: Scaffold(
appBar: AppBar(title: Text(photoSender)),
And body of the scaffold is a carouselsliderbuilder, so when the carousel changes, I want the photoSender variable to change.
Any ways to do this?

Declare you photoSender variable as Rx<String>:
final photoSender = Rx<String>("");
Wrap your Text widget with Obx/GetX:
appBar: AppBar(title: Obx(()=>Text(photoSender.value))),
Whenever your photoSender variable`s value changes, it will automatically update the text in your app bar.
To update the value:
photoSender.value = "John";

Related

I want a similar screen (one on top of other) like following to complete my weather app made using flutter . Can anyone please help me out?

I want this type of screen one on top of other and the previous screen should be lightly blurred or it should slightly darkens
You could use 'ModalBottomSheet' or even 'DraggableScrollableSheet' if a list is associated.
ModalBottomSheet
showModalBottomSheet(
context: context,
builder: (context) {
return Container(
// widgets
),
);
});
DraggableScrollableSheet
DraggableScrollableSheet(
builder:
(BuildContext context, ScrollController scrollController) {
return Container(
// widgets
);
},
),

Flutter IconButton does not play animation if used for navigation, showing popup etc

I am using IconButtons in my application for opening popups, deleting ListTiles from ListViews, navigating to other views etc.
To my surprise the onPressed callback always gets triggered before the animation starts to play resulting in that the animation will not play at all. This is confusing to the user because there is no feedback that he pushed the button.
The setup looks something like this.
This is the code for the add button in the top right corner:
IconButton(
onPressed: () {
showDialog(
context: context,
builder: (context) {
return AddDevicePopup(
...
).build(context);
});
},
icon: const Icon(
Icons.add_circle_outline_rounded,
size: 30.0,
)
)
When the user taps the button the popup immediately appears but the animation won't get played.
This is the same for the IconButtons on the tiles:
the edit button opens a popup immediately and the ripple or splash animation won't play.
the delete button removes the element from the list. In this case the ListTile element gets removed and so the IconButton disappears without the animation getting played.
In every case there is a Material widget that is an ancestor of the IconButton so wrapping it in a Material widget does not solve the problem. I have double checked it by removing the showDialog part from the callback, in these cases all of the IconButtons play the splash / ripple animation as expected.
How do I make the onPressed to wait for the animation to at least be started. I did not find any solution. Is is possible to trigger this animation via code? In that case I can add that to the beginning of the onPressed callback.
To add animations, you must use showGeneralDialog instead of showDialog.
The implementation looks like this:
showGeneralDialog(
barrierDismissible: true,
barrierColor: Colors.black.withOpacity(0.5),
transitionDuration: const Duration(milliseconds: 200),
context: context,
pageBuilder: (_, __, ___) {
return AddDevicePopup(
...
).build(context);
},
//Customize your animation here
transitionBuilder: (_, a1, __, child) {
return Transform.scale(
scale: a1.value,
child: Opacity(
opacity: a1.value,
child: child,
),
);
},
);

How does flutter make this style of widget?

Click the action of appBar to expand a pop-up window below, and click action again to shrink the pop-up window.Or is there a plugin recommendation with such an effect?
If view of you is simple view, you can use simple popup, see this tutorial.
If view of you complex more, you have to custom it. You need create Widget container both menu and expand part, custom display like main page. Then show it as dialog.
showGeneralDialog(
context: context,
barrierColor: Colors.black12.withOpacity(0.6), // background color
barrierDismissible: false, // should dialog be dismissed when tapped outside
barrierLabel: "Dialog", // label for barrier
transitionDuration: Duration(milliseconds: 400), // how long it takes to popup dialog after button click
pageBuilder: (_, __, ___) { // your widget implementation
FocusScope.of(context).requestFocus(_focusNodeCity);
return SafeArea(
child: Material(
color: Colors.transparent,
child: SizedBox.expand( // makes widget fullscreen
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
],
),
),
),
);
},
);

How to use showTimePicker as Widget in flutter?

I want the user to pick the date and time, for that there is date time picker dialogue.
But, is there a way that, I could show the date-time persistently on some flutter widget and use like any other widget?
Container(
child: showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
builder: (BuildContext context, Widget child) {
return Theme(
data: ThemeData.dark(),
child: child,
);
},
);
}
but I cannot use showTimePicker as Widget.
How to use showTimePicker() as widget? so that other widgets can be built on top of it.
I ran into the problem just like you some time ago and I copied the source code and made my custom widget. Now, it can be used like any widget. If you want to adopt this, I want to mention a couple of things.
I am not sure if this works well with localization, I did not test that.
I am not sure if this works on other themes than the light theme, I only tested on the light theme.
You can find the code here.
https://gist.github.com/mithunadhikari40/b55b9990ebc15d0d8bf70fd3f87709b0
Usage:
Copy the code from the above link, create a dart file, paste the code and use it like this:
SizedBox(
child: TimePickerDialog(
initialTime: TimeOfDay.fromDateTime(DateTime.now()),
onTimeChange: (TimeOfDay time) {
print(
"What we get the value of the time is now $time");
},
),
),
You have to open showTimePicker on click of any widget. So you can simply put your code of showTimePicker inside onTap property of the GestureDetector as shown below.
GestureDetector(
onTap: () async {
TimeOfDay picked = await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
builder: (BuildContext context, Widget child) {
return MediaQuery(
data: MediaQuery.of(context)
.copyWith(alwaysUse24HourFormat: true),
child: child,
);
},);
},
child: Text("SetTime",textAlign: TextAlign.center,));

Is it possible to change the default animation of showGeneralDialog() in flutter?

I'm trying to customize a showGeneralDialog to show my Transform.scale animation. I'm just wondering if there is a way to change the default animation of the widget to a curved animation?
like a1 and a2 within:
transitionBuilder: (context, a1, a2, widget) {
For example, I would like the Transform.scale to have a bounceIn effect.
Also, could someone please explain the difference between transitionBuilder: (context, a1, a2, widget) {} and pageBuilder: (context, animation1, animation2) {} for the showGeneralDialog widget? And how do I properly use them?
Thanks!
Yes it is possible by override transitionBuilder parameter.
1. Creating New showDialog() method
Commonly, developer uses showDialog to put some dialog that overlays underlying
screen.
In this app, it is convenient to have new method so it can be simply reused
through out our application.
new_dialog.dart
Future<T> showNewDialog<T>(
return showGeneralDialog(
...
transitionDuration: const Duration(milliseconds: 400),
transitionBuilder: _buildNewTransition,
);
}
We only reuse showGeneralDialog() method, and customized its animation-related
parameters : its transitionDuration for Duration and its transitionBuilder
as Animating component.
2. Defining new Animating component
In this demo we create simple animation by wrapping our child widget into
ScaleTransition. Then we defined its curve, rather in curve param only, or
in both of curve and reverseCurve.
new_dialog.dart
Widget _buildNewTransition(
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) {
return ScaleTransition(
scale: CurvedAnimation(
parent: animation,
curve: Curves.bounceIn,
reverseCurve: Curves.bounceIn,
),
child: child,
);
}
3. Display our new Dialog
Lastly, we can call this animated dialog anywhere in our app by using this
code :
main.dart
RaisedButton.icon(
icon: Icon(Icons.info_outline),
label: Text("Open Dialog"),
onPressed: () {
showNewDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("Bounce In"),
);
},
);
},
),
Repository
you may look repository here. Github
Demo
pageBuilder vs Transition builder
If we take look into DialogRoute definition in Flutter Repo, we can conclude that
each showDialog() method will runs and passing parameters in this sequences :
showDialog
showGeneralDialog
_DialogRoute
PopupRoute
ModalRoute
and so on
...
Take look at buildTransitions method _DialogRoute which return FadeTransition by default.
As I tried, if we put transitionBuilder : null, by calling showGeneralDialog, The App will displays Dialog and still got animated.
return showGeneralDialog(
...,
transitionBuilder: null,
);
Conversely, if we put pageBuilder : null, by calling showGeneralDialog, The App will displays nothing.
return showGeneralDialog(
...,
pageBuilder: null,
transitionBuilder: _buildNewTransition,
);
We may conclude that :
pageBuilder although has some parameters of Animation and
SecondaryAnimation, it is meant for defining Widget to display.
transitionBuilder it is meant for defining animation to be
processed, as Flutter displaying the Dialog