I have integrated CircularProgressIndicator in my app on login. The indicator is visible as desired but it hides my login screen with a white overlay. I want to make its background transparent instead of white. I tried to give the background color of CircularProgressIndicator but it doesn't make any change. Here is my code:
child: !_isLoading ? _loginScreen(loginBloc.state) : Center(
child: const SizedBox(
width: 40,
height: 40,
child: CircularProgressIndicator(),
),
)
Thank you.
You can use Stack with different opacity on its childern.
E.g.
Stack(
children: <Widget>[
Opacity(
opacity: 1, // You can reduce this when loading to give different effect
child: AbsorbPointer(
absorbing: _isLoading,
child: _loginScreen(loginBloc.state),
),
),
Opacity(
opacity: _isLoading ? 1.0 : 0,
child: CircularProgressIndicator(),
),
],
);
In case you want working solution, I use it heavily in https://github.com/yagnyam-in/proxy-flutter/blob/master/lib/widgets/loading.dart, https://github.com/yagnyam-in/proxy-flutter/blob/master/lib/widgets/async_helper.dart
Related
Hi I'm currently stacking buttons in flutter using
Transform.scale(
scale: 0.5,
child: Stack(
children: List.generate(data.length, (int index) {
Alignment alignment = alignments[index];
String message = messages[index];
return Align(
alignment: Alignment(
alignment.x,
alignment.y
),
child: SizedBox(
key: UniqueKey(),
width: 100.0,
height: 100.0,
child: MaterialButton(
key: UniqueKey(),
onPressed: () {
print("Specific message: "+message.toString());
},
child: Container(
width: 100.0,
height: 100.0,
color: Colors.pink,
child: Text("message: "+message.toString()),
),
),
),
);
}),
),
)
However this only works for the first few handful of widgets, the later widgets no longer print the message or register the click.
====
Side note I have just tested where alignment is Alignment(0.0, 0.0) and the top button works. However, when it has alignment away from the centre it doesn't work.
====
I have a suspicion if a button is built initially off screen you won't be able to press it even if you scale the whole screen.
To fix the problem all the buttons need to be on the screen at scale: 1.0
There are a lot of such stack elements on the page:
Stack(
children: <Widget>[
SizedBox(
height: 150,
width: 150,
child: Center(child: CircularProgressIndicator()),
),
Center(child: _getImage(imagePath)),
],
),
So there will be a CircularProgressIndicator below each image. Does it reduce the ui speed? When the Progress Indicator widget is ovelapped by the other widget will be disabled then?
First off you may use const on the constructor for better performance. Secondly, if you want to show a progress indicator when the image is loading maybe try using a FutureBuilder to check if the image is loading, if so return a CircularProgressIndicator else return the image.
But generally speaking flutter should be able to render tons of CircularProgressIndicator and yes it will still render the CircularProgressIndicator even if your image is shown and will therefore take up resources. If you dont want it to show and take resources you could warap it in a Visablity widget but I highly recommend using a futurebuilder so you can maintain the state of the image loading.
I think you are using progress loaders for image loading state, but I'd go with a package.
extended_image: ^4.1.0 seems like a good one and check the code below. It allows you to interfere in Loading State of the image, and you can put whatever widget in place of that state. This package does more than your intended use as well.
ExtendedImage.network(
url,
width: ScreenUtil.instance.setWidth(600),
height: ScreenUtil.instance.setWidth(400),
fit: BoxFit.fill,
cache: true,
loadStateChanged: (ExtendedImageState state) {
switch (state.extendedImageLoadState) {
case LoadState.loading:
_controller.reset();
return Image.asset(
"assets/loading.gif",
fit: BoxFit.fill,
);
break;
///if you don't want override completed widget
///please return null or state.completedWidget
//return null;
//return state.completedWidget;
case LoadState.completed:
_controller.forward();
return FadeTransition(
opacity: _controller,
child: ExtendedRawImage(
image: state.extendedImageInfo?.image,
width: ScreenUtil.instance.setWidth(600),
height: ScreenUtil.instance.setWidth(400),
),
);
break;
case LoadState.failed:
_controller.reset();
return GestureDetector(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Image.asset(
"assets/failed.jpg",
fit: BoxFit.fill,
),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: Text(
"load image failed, click to reload",
textAlign: TextAlign.center,
),
)
],
),
onTap: () {
state.reLoadImage();
},
);
break;
}
},
)
i am created an SVG image for background, but it is loaded after some time, the issue is:
when it is not loaded yet all widgets appears randomly. i just need a loader after the image loaded it page widget appears.
the code is:
Scaffold(
appBar: const _CustomNotificationAppBar(),
body: isFinished
? SingleChildScrollView(
child: Stack(
children: [
//notification background
Opacity(
opacity: 0.42,
child: SvgPicture.asset(
'assets/images/notification_background.svg',
),
),
IconButton(
icon: const Icon(
Icons.notifications_active_outlined,
),
onPressed: () {})),
],
),
)
: const Center(
child: CircularProgressIndicator(),
),
);
well if I understands you well and as long as your SVG is loading from the device "asset",
there should not be delay in first place.
I think the problem is you emulator or physical device is too slow , And you may face this problem in debug only
try to run flutter build APK and install that generated APK in your phone and check if problem remains.
however you can achieve that also like this
SvgPicture.asset(
'assets/images/notification_background.svg',
placeholderBuilder: (context) => Text("I am Loading"),
),
You can wrap it in a Container, and it will work.
For eg:
Container(
//height :desired height,
//width : desired width
child: Opacity(
opacity: 0.42,
child: SvgPicture.asset(
'assets/images/notification_background.svg',
),
))
You can pass a placeholderBuilder to your SvgPicture.asset like this:
SvgPicture.asset(
'assets/images/notification_background.svg',
placeholderBuilder: (context) => Icon(Icons.your_desired_icon),
),
You can also wrap the Icon with a SizedBox if you need to comply with a certain size, or replace it by any other widget that you wish.
More info about the widget you're using is available in its API docs.
So, I'm building apps with flutter and have some cases when watermark is needed for some page. I have solution for this problem using Stack Widget, but more problem comes. The problem are:
I need the watermark can cover all the screen.
I've try using Positioned with Image behind widgets, but the widgets that have background cover my watermark and cannot be seen well.
//Code to make watermark behind widgets
Stack (
children : [
Positioned(
child: Center(
child: Opacity(
opacity: 0.1,
child: Image.asset("path/to/images.png", fit: BoxFit.contain)
),
),
),
AllMyScreenWidgets(),
]
)
When Positioned widget with Image is over the widgets, you can see all watermark and that's good but you can't interact with the widgets behind.
//Code to make watermark over widgets
Stack (
children : [
AllMyScreenWidgets(),
Positioned(
child: Center(
child: Opacity(
opacity: 0.1,
child: Image.asset("path/to/images.png", fit: BoxFit.contain)
),
),
),
]
)
Is it possible to keep use Stack Widget? or there any advice, solution, trick or tips about this problem?
Thanks
try IgnorePointer:
//Code to make watermark over widgets
Stack (
children : [
AllMyScreenWidgets(),
Positioned(
child: IgnorePointer(ignoring: true,
child: Center(
child: Opacity(
opacity: 0.1,
child: Image.asset("path/to/images.png", fit: BoxFit.contain)
),
),
),
),
]
)
Note I have not added complete code.
In below code I am rendering CircularProgressIndicator and InAppWebView at once to avoid the white screen displayed (Apart from splash and launch screen) by the InAppWebView at the time of loading.
I am using opacity to display one widget at a time. In my example initially
CircularProgressIndicator is visible only for 5 seconds. Than after those 5 seconds InAppWebView is displayed which was kept invisible.
Using of Stack layout makes webview scroll leggy. I need to figure out on how to render CircularProgressIndicatora and InAppWebView together without having to use stack.
body: WillPopScope(
onWillPop: onWillPop,
child: Stack(
children: <Widget>[
Opacity(
opacity: _isLoadingPage ? 1.0 : 0.0,
child: Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.deepPurple),
),
),
),
Opacity(
opacity: _isLoadingPage ? 0.0 : 1.0,
child: InAppWebView(
initialUrl: 'https://www.theonlineindia.co.in',
),
),
],
),
),