I am using the following AdaptiveNavigationScaffold implementation for a scaffold for a Windows flutter application...
Widget build(BuildContext context) => AdaptiveNavigationScaffold(
selectedIndex: StatefulShellRoute.of(context).currentIndex,
drawerHeader: SizedBox(
child: Container(
color: Colors.red,
),
height: 200,
width: double.infinity,
),
drawerScrimColor: Colors.white,
backgroundColor: Colors.white,
bottomNavigationOverflow: 10,
body: ClipRect(child: child),
onDestinationSelected: (int idx) => _goBranch(context, idx),
destinations: branches.map((e) => e.adaptiveDestination).toList(),
);
Everything is working well with go_router for handling navigation/state/all that good stuff. The issue I'm experiencing is with this black line showing up, and I can't seem to figure out where it is coming from. I can confirm this issue is not present when running the app with a web target.
I've tried to configure all the parameters of the AdaptiveNavigationScaffold but have not had any luck.
Git report: https://github.com/material-components/material-components-flutter-adaptive/issues/66
Related
After downloading the app through the apk release, in the first time, it works normally. But once you close the app and open it again, the ui elements disappears. It has a very strange behavior, if I restart the device, it works in the first time the app is open (after the restart), and after closing it, it doens't work again.
This only happens in the release version, debugging works as expected.
I am using Getx, I don't see a relation since I have already develop other apps with this structure. This is the code of the first page loaded.
return Container(
constraints: BoxConstraints(minWidth: Get.width, minHeight: Get.height),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
image: DecorationImage(
opacity: 0.35,
repeat: ImageRepeat.repeat,
image: AssetImage(AppConstants.assets.background_image),
),
),
child: Scaffold(
backgroundColor: Colors.transparent,
body: Container(
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
width: Get.width,
height: Get.height * 0.45,
child: Center(
child: Padding(
padding: const EdgeInsets.only(top: 80.0),
child: SizedBox(
width: Get.width * 0.8,
height: Get.height * 0.3,
child: Image.asset(AppConstants.assets.logo_image),
),
),
),
),
SizedBox(
height: Get.height * 0.55,
child: TabBarView(
controller: controller.tabController,
physics: NeverScrollableScrollPhysics(),
children: [
TelephoneTab(),
CodeTab(),
],
),
),
],
),
),
),
),
);
I have tried removing the background image by removing the Container before the Scaffold entirely, removing every element in the UI and adding just a small button in the middle. Updating my kotlin.
Tried running with flutter run --release. No logs.
May be the same thing as this.
Flutter doctor is fine.
The problem seems to be something related to the Scaffold and the Container with the background image. Elements outside the Scaffold were drawn as usual.
I changed the first page of the app in order to go directly to the HomePage and it worked fine, even logging out to the LoginPage.
Then I tried creating a SplashPage before the LoginPage, initially, I used the same structure with the Container, BoxDecoration, and Scaffold. The problem was happening again, but this time in the SplashPage, everything inside the Scaffold was invisible with the same behavior as mentioned above.
After that, I simply define the extendBody as true in the Scaffold of the SplashPage and the problem stopped occurring.
I don't exactly understand what this changes. Feel free to add an explanation to this answer.
The widget is always displayed on the screen, just like in iOS, adding controls to the window. How to achieve it, thank you! Grateful!
Add this to your MaterialApp to remove it
MaterialApp(
debugShowCheckedModeBanner: false,
)
You can use Banner widget that actually displays debug banner.
docs link : https://api.flutter.dev/flutter/widgets/Banner-class.html
Banner(
location: BannerLocation.topEnd,
message: "",
child: Icon(Icons.help), //you can pass anything here as widget
color: Colors.transparent,
),
Have a look at this. Flutter provides a default Banner widget.It is somewhat similar to the debug banner what we are used to of seeing on the top-right corner on a flutter app in debug mode.
https://api.flutter.dev/flutter/widgets/Banner-class.html
You can use Stack Widget to overlay Widgets over one another. For example:
Stack(
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 90,
height: 90,
color: Colors.green,
),
Container(
width: 80,
height: 80,
color: Colors.blue,
),
],
)
The Banner widget realises this by creating a CustomPainter, take a look at the Implementation. But I think a Stack would be the better choice here if you are using Widgets.
I am wondering if it is possible to repeat an actual icon widget like the image I have attached.
Currently getting this result using ImageRepeat but would like to be able to use and actual icon so it can be modular and the icon can change.
( the repeating image can currently change but I don't want to have to create 100 images of icons. )
Current Solution:
SizedBox.expand(
child: Image.asset(
_backGroundImage,
repeat: ImageRepeat.repeat,
)),
try Wrap:
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: Colors.orange,
child: Wrap(
children: List<Widget>.generate(2000, (int index) {
return Icon(Icons.add);
}),
),
),
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.
Widget build(BuildContext context) {
print("homepage");
final navigation = Provider.of<NavigationProvider>(context, listen: false);
return Consumer<ThemeProvider>(builder: (context, themeData, _) {
return Scaffold(
backgroundColor: themeData.getTheme['mainBackground'],
appBar: AppBar(
backgroundColor: themeData.getTheme['appBar'],
elevation: 0.0,
title: Text(
"INTRADAE",
style: GoogleFonts.montserrat(
color: themeData.getTheme['textColor'],
),
),
actions: <Widget>[
Container(
margin: EdgeInsets.only(right: 5),
child: IconButton(
icon: Icon(
Icons.account_balance_wallet,
size: 30,
color: themeData.getTheme['textColor'],
),
onPressed: null,
),
)
],
),
body: Consumer<NavigationProvider>(
builder: (context, navigationProvider, _) =>
navigationProvider.getNavigation),
bottomNavigationBar: CurvedNavigationBar(
index: 0,
height: 50,
color: themeData.getTheme['secondaryBackground'],
backgroundColor: themeData.getTheme['mainBackground'],
buttonBackgroundColor: themeData.getTheme['mainBackground'],
items: <Widget>[
Icon(Icons.home, color: Colors.white),
Icon(Icons.shopping_cart, color: Colors.white),
Icon(Icons.person, color: Colors.white)
],
onTap: (index) {
navigation.updateNavigation(_pages[index]);
},
),
);
});
I am trying to update whatever is inside the body of the scaffold when updateNavigation takes place. Everything seemed fine, until I put a print inside the build method of the main widget and noticed that it was being called on every update the to NavigationProvider.
I am scratching my head since. I can't understand why this widget has to rebuild when only the Consumers should rebuild which in this case is inside the body of the Scaffold.
Coming from a React background this just seems weird to me.
Can anyone tell me why this is happening?
The problem was solved once I performed a hot restart. I then read about Hot Reload in Flutter the docs and realised that the changes I was making to the code weren't going to be seen unless I performed a hot restart.
Although the code posted here has
listen:false
in,
Provider.of<NavigationProvider>(context, listen: false)
But, I originally did not have that in my code. And when adding that argument too didn't seem to help, I decided to post a question here.
The problem was hot reload all along. Should've have made sure before posting.