I've created some iOS14 Widgets and set a Rectangle with a custom Image as Background for it.
It have a corner Radius and a padding to all sides.
The Result is a black Background behind my custom Background and I don't know how to make it blur like other Widgets (for example the Shortcuts Widget you see in the picture at the bottom).
Has anyone an idea what I can do?
Update:
Ok I figured out that you can change the background color in the Widget struct itself. A nice way is to set the colors you want in Assets Catalog from the Widget -> WidgetBackground and add the following code in the struct:
#main
struct CoreDataWidget: Widget {
let kind: String = "CoreDataWidget"
var body: some WidgetConfiguration {
StaticConfiguration(kind: kind, provider: HomeWidgetTimeline()) { entry in
HomeWidgetEntryView(entry: entry)
.background(Color("WidgetBackground")) // <- this line
}
.configurationDisplayName("OhMyMoney")
.description("You want to know your current Money and add Expenses quickly with one Touch? \nThen use this Widget!".localized())
.supportedFamilies([.systemSmall, .systemMedium, .systemLarge])
}
}
But is there a way to make the background transparent like the Shortcuts Widget from the picture above?
It's impossible :(
3rd Party Apps cannot use blurred backgrounds for their Widgets
https://developer.apple.com/forums/thread/655990
Related
I want to dim (gray) the background when the bottom sheet opens, like a modal bottom sheet, but still be able to interact with the rest of the UI while the bottom sheet is open - like a regular bottom sheet.
Any ideas?
Even though, I won't recommend creating such an effect as it is not very understandable from the user perspective.
You can achieve this by using the IgnorePointer, Stack and setState((){})
1- Add a field bool showOverlay = false;
2- Align some Container to with Alignment.bottom to represent ur bottom sheet
3- Put some overlay Container with some background color and opacity and wrap it with IgnorePointer(ignoring: true, ...) which will let it not interfere with your widgets below.
I think you got it from here.
I'm trying to transition a Text Widget between two screens (using Hero widget).
I'd like the Text Widget to change its style between these two screens (let's say FontSize).
Implementing it resulting in a strange behavior: the text doesn't change its size smoothly but rather has jerky animation...
Any idea on how to implement it correctly?
recently, I published a Package HERO_TEXT
https://pub.dev/packages/hero_text
it seems to me that it can help you.
I am using SliverAppBar widget with some background image behind it. Since the image I will load will be dynamic, sometimes it can have light colors and can cause the back button (or any other action button) to be hardly visible.
As you can see in the screenshot below, I gave a little shadow to the app bar title using TextStyle & Shadow widgets, so it is much more visible than the back button.
You can try use "elevation" here is the Flutter link for more clarification: https://www.google.com/url?sa=t&source=web&rct=j&url=https://api.flutter.dev/flutter/material/SliverAppBar/elevation.html&ved=2ahUKEwiEpfiIn4TwAhWUH7cAHY9ECIwQFjACegQIBRAC&usg=AOvVaw0wCdyaVv3EA8ulVXXvaVMu
I want users to scroll between pages in PageView, but I don't want to show them an animation when they try to scroll before first and after last page. I can switch between colorful animation, black animation and no scrolling, but I could not find any possibility to disable the animation at all.
If there is no such possibility, how can I change the color of that animation or make it transparent at least?
Based on your screenshot, I can say that you are using BouncingScrollPhysics for your PageView. This behavior is commonly used by iOS devices. Nonetheless, I have also reviewed the entire source code you have provided here.
What went wrong
You have added PageView without accompanying it with a Scaffold or Material widget at the top level that's why the background behind the children of the PageView is color black.
https://dartpad.dev/c709e410d0a68248ac5b387b3bc6af93
From the documentation:
Scaffold implements the basic material design visual layout structure.
Without this widget, you'll notice that your app may occupy the entire screen of your device, including the notification bar, because it (PageView) does not know where is the status bar is located in the screen.
What you can do
I noticed that all of the children added inside the PageView has individual Scaffold and AppBar, it's not really necessary to nest scaffolds and you may want to use TabBarView instead of PageView, and let the parent widget handle the AppBar changes via TabController.
But if you think it'll cost you too much effort to refactor, feel free to review the following options that require minimal changes which will suit your needs:
Option 1. You can wrap your widget inside a Scaffold widget.
https://dartpad.dev/4620ff91444353f5e000d2063594bd96
Option 2. Given that nesting Scaffold widgets is not a good practice, you can just use the plain Material widget to wrap your PageView with children wrapped with Scaffold widget.
https://dartpad.dev/43f8730e5592ce1f96193fc01f08a29c
These solutions will change the background color of the PageView from black to white.
Option 3. If you really want to get rid of the animation, the easiest way to hack it is changing your scroll physics:
physics: ClampingScrollPhysics(),
However, this still has a glowing or ripple effect when you try to swipe at the end of the screen.
To further get rid of this effect, I'll share with you these SO answers:
How to remove scroll glow? (works for Android)
How to remove overscroll on ios? (works for iOS)
Further reading
https://api.flutter.dev/flutter/widgets/ScrollPhysics-class.html
https://medium.com/flutter-community/custom-scroll-physics-in-flutter-3224dd9e9b41
I have to create a image button in gwt which uses three images(left side image,center stretch image and right image).Left side images and right images having rounded corners.Center Image wants to be stretched depends on button title size.Created ImageButton should have all the functionalities of Button.
Can anyone help me in how to achieve this.
If you need a button with rounded corners then there are a number of options:
Create a new widget that extends the DecoratorPanel to create the rounded corners. The DecoratorPanel will result in a table (HTML). You'll probably want to replace the standard images. Look at the standard.css that GWT provides to find the styles that define those images, then override those styles in your custom stylesheet (look for the CSS class ".gwt-DecoratorPanel"). In the widget, add a Label widget to display the button text and provide get and set methods on your widget to get and set text to the internal label. The label will resize automatically forcing the table cell to grow bigger.
Create a new widget that extends Composite. The widget should wrap a FlexTable. Use 3 cells on the same row. Add a Label to the center cell and provide get and set methods on your widget to get and set text to the internal label. The label will resize automatically forcing the table cell to grow bigger. Add the appropriate handlers to the FlexTable widget. I suggest you use those events to add or remove styles to the appropriate cells and define the background images in a stylesheet.
You could create your own widget. This requires that you generate your own HTML etc. which may not immediately work in every browser. I recommend trying option 1 or 2 first.
You might be able to get away with using only one sprite image if you can limit the maximum width of your buttons. We wrote a CssButton class (extends Button) as part of the GWT Portlets framework that uses a single background image sprite to create rounded buttons. The code uses CSS clipping to select the correct background image from the sprite based on the width of the button.
The main advantages are that it extends the normal GWT Button and uses only a single BUTTON element in the DOM (lightweight). The disadvantage is that the maximum width of the button is limited to the widest button image in the sprite.
It also handles rollover and click effects all using the same sprite.
The code is in the GWT Portlets repository if you want to look further.