Hi I am a flutter mobile developer and I tried to use this package: https://pub.dev/packages/photo_view/versions for an offline map. I tried zoom and drag and other gestures. It seems working properly for zooming most of the time, but when I tried to drag the picture It has a less than 10 percent success to move it. Here is my code, can somebody help me what coul'd I do wrong? In the package example It seems like It's working properly.
class OfflineMapWidget extends StatefulWidget {
final Session session;
final bool connectedToNetwork;
const OfflineMapWidget(
{Key? key, required this.session, required this.connectedToNetwork})
: super(key: key);
#override
_OfflineMapWidgetState createState() => _OfflineMapWidgetState();
}
class _OfflineMapWidgetState extends State<OfflineMapWidget> {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.black,
child: SafeArea(
child: Theme(
data: ThemeData(
brightness: Brightness.dark,
appBarTheme: AppBarTheme(
backgroundColor: Color.fromARGB(255, 65, 116, 131))),
child: Scaffold(
appBar: AppBar(
leading: MenuWidget(),
actions: [widget.connectedToNetwork ? QrPaymentButton(session: widget.session) : Container()],
),
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: PhotoView(
imageProvider: AssetImage('assets/images/offline_map.png'),
),
),
),
),
),
);
}
}
Update: I found the problem. This Widget was in a ZoomDrawer (another pub dev package), and that Widget confused this one, so I need to find another solution. If somebody else uses this 2 package in one the problem is here. The solution is simple, you can disable drag in ZoomDrawer with the disableDragGesture property. If you don't want to disable it on all menu points you can check if you are in the mentioned menu point and disable only when this one is up.I write this one down in the comments as well so it will be more clear.
I found the problem. This Widget was in a ZoomDrawer (another pub dev package), and that Widget confused this one, so I need to find another solution. If somebody else uses this 2 package in one the problem is here. The solution is simple, you can disable drag in ZoomDrawer with the disableDragGesture property. If you don't want to disable it on all menu points you can check if you are in the mentioned menu point and disable only when this one is up.
Related
The app that im building requires me to have an AppBar with a leading back button. However I prefer the cupertino back button(iOS-style) for the leading icon instead of the default back button for android. I am aware that I can manually change the leading button of each AppBar by using an iconButton but i was wondering if there is any easy way to do this like a theme. Any help appreciated.
Instead of using MaterialApp as your root widget you can use CupertinoApp to do the same, assuming that the above changing of the AppBar is needed for each screen in your app. This will automatically set the icon as you require
Here is a simple example to help you
Root Widget or starting point of the app
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return const CupertinoApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
Then using a CupertinoPageScaffold where you want the CupertinoNavigationBar (I mean your appbar with ios icons) with the chevron icon like ios
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
// Try removing opacity to observe the lack of a blur effect and of sliding content.
automaticallyImplyLeading: true // This will decide if the leading icon comes in by default
backgroundColor: CupertinoColors.systemGrey.withOpacity(0.5),
middle: const Text('Sample Code'),
),
child: Column(
children: <Widget>[
Container(height: 50, color: CupertinoColors.systemRed),
Container(height: 50, color: CupertinoColors.systemGreen),
Container(height: 50, color: CupertinoColors.systemBlue),
Container(height: 50, color: CupertinoColors.systemYellow),
],
),
);
Facing a relatively similar problem I used the builder property, which it should work with any App like :
CupertinoApp(
builder: (_, child) => IconTheme(
data: IconThemeData(
size: 15,
color: const Color(0xffffffff),
),
child: child,
),
)
My problem was with the default icon color and size but you can use AppBarTheme or any similar widget to achieve what you want.
This may help you override default value with majority of the lacking theme delegates when working with the cupertino family (It's not yet mature like the material but I can see the constant and rapid effort and the future of it).
How to structure a flutter project like this one:
Example restaurant pos image
Do you find this beginning of the tree structure correct:
class HomePageState extends State<HomePage>{
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Row(
children: [
Container( // menu
width:60,
color: Colors.white,
),
Expanded( // body
child: Container(
color: Colors.red,
),
),
Container( // ListProducts
width:300,
color: Colors.green,
),
],
),
backgroundColor: Color.fromARGB(255 , 244 , 246, 250),
)
);
}
}
code preview
You might want to place that MaterialApp into a separate parent widget (I think it will cause issues when using MediaQuery and Theme inside the same build method). It also might be cleaner down the line to extract every part (menu, body, ListProducts) into separate widgets.
Also, I would advise you to take a look at the LayoutBuilder widget,
and the ressources on this page if the app is meant to work on narrower screens.
Oh and if you don't know about state management, definitely check this out.
hey guys I get very upset from this and now I need your help please
I want to add progress bar in list view using flutter I have tried many things but I really don't get it. so please help me with this. and the other thing I want to know that how I make my progress bar working with time and date I mean to say that I get time and date like Microsoft project and I want to show progress according to time and date. soooo please help me guys...
try this
class LoaderList extends StatelessWidget {
const LoaderList({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(itemBuilder: (ctx, index) {
return Container(
color: Colors.amber,
margin: EdgeInsets.all(10),
height: 100,
child: Center(
child: LinearProgressIndicator(
// add value to control the progress
valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
),
),
);
}),
);
}
}
I'm just starting to learn app development with Flutter.
I am trying to build an app for learning purposes that grabs an image from a website using their API to get a random image. The app displays the image, and has a button which is supposed to grab a new random image when pressed.
The problem is that the URL for the API doesn't change, so Flutter thinks the image is the same and doesn't download a new image. At least, that's what I think is going on.
The code is very basic. So far just showing an image and a button. I've tried various things, and was thinking imageCache.clear(); should do the job when the button is pushed, but nothing seems to work. I have also tried various tricks with resetting state and trying to navigate to the same page with named routes, but they all still show the same image (which is why I think it might be a caching issue). :shrug:
All of this is running from a single main.dart file.
import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
backgroundColor: Colors.lightGreen[50],
appBar: AppBar(
title: Text("Show Me The Lettuce",
style: TextStyle(color: Colors.white70)),
backgroundColor: Colors.green[900],
),
body: ShowLettuce(),
),
),
);
}
class ShowLettuce extends StatefulWidget {
#override
_ShowLettuceState createState() => _ShowLettuceState();
}
class _ShowLettuceState extends State<ShowLettuce> {
String url = 'https://source.unsplash.com/900x900/?lettuce';
#override
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(80.0),
child: Center(child: CircularProgressIndicator()),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: FadeInImage.memoryNetwork(
placeholder: kTransparentImage, image: url),
),
],
),
SizedBox(
height: 20.0,
),
RaisedButton(
onPressed: () {
imageCache.clear();
print('button pressed.');
},
child: Text('Show Me A New Lettuce!'),
),
],
),
);
}
}
I've read through a lot of Flutter documentation, but I'm not yet at the point where I can interpret much of what they say into usable code (not sure where and how I'm supposed to plug it into my code, for example the imageCache documentation: https://api.flutter.dev/flutter/painting/ImageCache-class.html). It seems like this should be a really easy solution, but it is escaping me.
Any help is much appreciated.
I have solved you problem.
You must add for your code couple lines code:
as first - import:
import 'dart:math';
next - in class _ShowLettuceState after declared url variable:
var random = new Random();
and for finish - after click the button, namely in onPressed:
setState(() {
url = 'https://source.unsplash.com/900x900/?lettuce' + random.nextInt(100).toString();
});
I suggest you use this code :
String url = 'https://source.unsplash.com/900x900/?lettuce-${Random().nextInt(100)}';
This is inspired by #Captivity solution, but I add a - that makes it work.
The title says it all. Here's a gif demonstrating. Some changes to code the UI gets updated as expected whereas at other times the updates aren't reflected.
This prompt in VSCode does not mean that the app has hot reloaded.
Syncing files to device Android SDK built for x86."
Heres my main.dart file that has the two lists I want to flip for reference.
class _MyHomePageState extends State<MyHomePage> {
// List<Color> colors = [Colors.yellow, Colors.red, Colors.yellow];
List<Color> colors = [Colors.red, Colors.white, Colors.blue];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: colors
.map((element) => Expanded(
child: Container(
decoration: BoxDecoration(color: element),
// decoration: BoxDecoration(color: _counter.isEven ? Colors.red : Colors.blue),
)))
.toList()),
),
}
}
Please advise me on how to get the VScode hot reloading to work when I do command+s.
When I move colors out of the state of the _MyHomePageStatte Widget, the behavior is the same. Here's the gif demo
If you update a member variable in a stateful widget, you must hot restart the app or close and reopen the widget
And to make the hot reload working with the variable outside of the widget, you must use const varName instead of final varName or <Type> varName. If the variable cannot be converted to const then you have no option than hot restart the app
it's because first color changed is a variable, when you save hot reload apply the new color, but when you change the second variable, it's a variable in your state, hot reload change your variables but the state of your widget dosn't change, it 's not a probleme it's normal. If you want to see your change you can reload your application.
Only the Variables which are inside build or updated inside build are impacted through hot reload,
If you want to change variable outside build or reload the state you must consider hot restart.