I currently have a Flutter app which keeps track of the amount of time a user spends on the app with a timer which runs in the background. Users can set limits on the amount of time they spend in the app. Every minute, the timers checks if the user has exceeded their time limit. If so, I want to display a dialog or alert telling the user this.
The problem is that the timer has no way to access the current context and thus no way to create my dialog. Is there a way to get around this?
There is a package that enables you show dialogs with no need BuildContext from business layer. It's called OneContext.
That package also works with page navigation, overlays and other things with no need BuildContext.
Take a look at: https://pub.dev/packages/one_context
Use example:
// example dialog
OneContext().showDialog(
// barrierDismissible: false,
builder: (_) => AlertDialog(
title: new Text("The Title"),
content: new Text("The Body"),
)
);
// example snackBar
OneContext().showSnackBar(
builder: (_) => SnackBar(content: Text('My awesome snackBar!'))
);
You can achieve that by creating a custom Dialog Manager and a locator.
You can read the full tutorial here : https://medium.com/flutter-community/manager-your-flutter-dialogs-with-a-dialog-manager-1e862529523a
There is a package for it called Stacked_services
It provides: NavigationService, DialogService and SnackbarService.
Related
I am trying to build dashboard for sports app, which consists of calendar that holds events, some other info and list of players within team. Upon opening dashboard function getDashboard(teamid) gets called which loads all of the data including calendar and event data.
My calendar has button to switch months, data about next months isn't loaded just because it doesn't make sense to load years worth of data when most of the times only current months data is used.
Currently all of the code is wrapped in futurebuilder.
it looks something like this
FutureBuilder<TeamDashboardDto?>(
future: _teamDashboardDto,
builder: (context, snapshot) {
{
return SingleChildScrollView(
child: Column(
children: [
SomeWidgetsThatcontainInformation(),
Calendar( events: snapshot.data.eventList),
PlayerList(data: snapshotData),
], ), ), }, )
Although UI ir horrendous i hope you get the idea.
I dont want to reload all of the data, i just want to refresh Calendar data and while its being loaded I wish to replace calendar with loading icon. Is this possible? Or maybe I should just reload all dashboard?
Although I don't completely understand the question, I would recommend making future requests on initstate then on the click of a button make a new future request and use setstate to update your UI. This in turn gives you flexibility.
I'm new in flutter and I just want to know if this scenario/feature is possible in flutter/flutter web. I want to update the url/route base on the state of the screen. For example, in 9gag.com, there are buttons for Hot, Trending, and Fresh. Then, if I clicked the Hot button its url will be updated to 9gag.com/hot and also its contents, the same goes for Trending and Fresh buttons. Is this possible in flutter/flutter web? If so, how do I implement this feature?(much better if the implementation uses bloc)
Totally possible and is very easy to achieve just use url_launcher Package on onpressed/ontap
Example: Add this code somewhere like in the beginning of your stateful management or at the end of your code
_launchURL() async {
const url = 'https://flutter.io';
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}
Call it somewhere like this
RaisedButton(
onPressed: _launchURL,
child: new Text('Show Flutter homepage'),
),
),
Now if you have some 9gag/hot button or container whatever you are going with just put that url and when user taps it, it will open that url. If you want to open it inside the app webview that's also possible but slightly different.
If I understood correctly It's pretty straightforward use the default way of navigation and routing.
I'm not sure with your approach like you have mentioned
I want to update the url/route base on the state of the screen
and
Then, if I clicked the Hot button its url will be updated to 9gag.com/hot and also its contents
If I'm not wrong there is a inbuilt feature of navigating to other screens and once you land on the desired screen, you can see the refreshed content. If you want to try material design the code will be like this
//within your stateful or stateless widget
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => YourPage()),
Instead of using a package you can try this inbuilt way of doing the same job. But it's upto you which one you want to use. Checkout the official flutter documentation https://flutter.dev/docs/cookbook/navigation
I hope this approach also helps to answer your question. If so happy to help in your flutter journey, if not share that how did you solved it.
I am pretty new to Flutter / Dart and right now, I have a problem. I have a homepage in my App and it displays an AppBar, a BottomNavigationBar and a body. The body is a simple card with content in it. The problem is: I need to be able to display three different cards, depending on the status I get from a server.
So there is the ActiveCard, the InactiveCard and the ErrorCard. The ErrorCard has a Button to go back to the InactiveCard and the ActiveCard as well as the InactiveCard should be wrapped in an Inkwell or similar to start a ride for example.
Now I am wondering: I am not sure how to implement all this. Can I just create three Stateless Widgets for each Card and depending on the server status just "replace" or "change" the body in my homepage? And where can I "control" the current status? Like I said, the Cards need to be clickable and "erase" themselves to make space for the following card (e.g: InactiveTrip gets clicked, now there should be the Card for ActiveTrip, because I started my trip and the user should see that my trip is currently active)
I cant provide code really, because so far I have not really something with will be even close to the result I expect.
Maybe you have some tips and packages I can use.
You can convert the statelessWidget to statefulWidget ans use setState() method.This is
recommended for small application but if your apps have more complexity then you have learn the state Management like provider,bloc pattern or Mvvm architechture.
yes, you can use statelessWidget for this purpose.
and you can use bloc pattern
to manage the page state.
I will use stateless for page and stream for the card content:
//Card model is your data modal
StreamController<Card> _streamController = StreamController();
Card _currentCard = /* default inactivate */;
StreamBuilder<bool>(
stream: _streamController.stream,
initialData: _currentCard,
builder: (BuildContext context, AsyncSnapshot<Card> snapshot) {
//return Container(/*content of your card*/);
},
),
//Everytime you need to change the card content, you sink the new value
_streamController.sink.add(_currentCard = /*new card data modal*/);
I want to launch a simple walk-through for our app. The user would log in for the first time (or select the 'tutorial' option in settings), and it would walk you through how to use the app.
To clarify, the app would launch a dialog/alertdialog and the background would go grey or become greyed out highlighting specific areas/buttons of the app to talk them through it. The dialog box would have a child of Text explaining how to use it.
After the user has clicked through the steps the tutorial would end but could be reactivated in settings.
Any help would be appreciated.
Thanks
There is a plugin called showcaseview and does pretty much what you want. You can get it here. For using it you need to wrap the page you want to show in a ShowCaseWidget
ShowCaseWidget(
builder: Builder(
builder : (context) () => Somewidget()
),
),
then for every part of the page you want to show a guide for it, wrap it in a ShowCase
Showcase(
key: _one,
title: 'Menu',
description: 'Click here to see menu options',
child: Icon(
Icons.menu,
color: Colors.black45,
),
),
First of all, I'm using the animations package from Flutter and my question is only about using this package:
Before using that package, I pushed the second view to the Navigator with the await keyword, so when the user goes back from this second view, the code after this gets called:
await Navigator.push(
context,
MaterialPageRoute(builder: (context) => DetailView()),
);
loadData();
Now after integrating this animations library, I don't call the Navigator.push() myself, but only define the target widget and the navigation is done by the library.
Whereas till now, the code for any list item was just the ListTile widget, now it looks like that:
return OpenContainer(
openBuilder: (BuildContext _, VoidCallback closeContainer) {
return DetailView();
},
closedBuilder: (BuildContext _, VoidCallback openContainer) {
return _buildListTile(openContainer);
},
);
In the _buildListTile method the ListTile is wrapped with an InkWell which takes this VoidCallback openContainer for the onTap parameter.
What I can't find out is how to wait for the user clicking back on the second and thus coming back to the first view. I need to (re)load the data as shown in the first code snippet. Has anyone done that and can tell me?
I tried to play around with the openBuilder and closedBuilder, but unfortunately without success...
Thank to this GitHub issue two days ago the user 'The-Redhat' push on animations package master branch the change that enable OpenContainer onClose event
To use it before package official version release simply replace animations package in your pubspec.yaml with
animations:
git:
url: git://github.com/flutter/packages.git
path: packages/animations
At this point you can simply pass your custom function to OpenContainer widget that will be executed every time it will be closed. In you case you can now update data when user come back to "parent widget".
UPDATE
From 2 June 2020 this feature is available on animations v1.1.0
Add OpenContainer.onClosed, which is called with a returned value when the container was popped and has returned to the closed state.