I am new to Flutter and I need help on this. I want to create a circular image view in Flutter and on clicking the view I want the app to prompt the user to select the image from the mobile device's gallery. Upon selecting the image, the image should be displayed on the image view. Is there any way that this is possible?
Your question is very unclear. You need to show some sample/design first of what you want. Maybe draw something:
However, you can create a circular image with Widget called;
CircleAvatar(
child: Image.network("http://image.com"),
),
Then you can wrap it in GestureDetect() Widget and
GestureDetector(
Child: CircleAvatar(
child: Image.network("http://image.com"),
),
onTap: ImagePicker....,)
ImagePicker can be used to add the capability of allowing users to upload image from gallery.
Related
I'm building a screen and flutter where the user will visualize some data and when user user touche the screen I want to show up some options just like youtube app's player does.
For example, user is using the app in landscape orientation:
When it touches the screen I want to show some options just like that:
What are the options to achieve this behavior in my flutter app?
You can wrap the whole thing with GestureDetector
GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => {// show the controls},
child: DataVisualizer(),
),
Be careful that using this method will also trigger the click or press method of the GestureDetector if they are tappable.
I am new to flutter and curious if we can create a custom back press button, not the one in appbar.
Just like a normal button that takes back to previous screen.
Here's how you so that:
Create a raw material button
Add the on press method to decide which screen it goes to.
In you main.dart, under the routes method, import the screen you want to push the current screen back to and then call it something.
Inside your onPress() method, you can call Navigator.pushNamed(context, routeName).
Now you can customise this raw material button as much as you want. Here are some of the main properties you can set:
textStyle
fillColor
elevation
padding
constraints
shape
child
Now give a name to this custom button you have created by extracting it into a widget.
Call the widget inside your code! If you want it to be aligned at the top left, which is usually where you find it:
Align(
alignment: Alignment.topLeft,
child: CustomButton()
),
Enjoy! PS: If you need any help, feel free to ask me and I will assist you to my best abilities!
I am trying to create a screen like below which will allow user to show few buttons on top of another screen . So basically it will be on top of another screen which can be seen from the half transparent screen of the top level screen. Not sure how to create it and which widget to use. Can someone please guide here. I am trying to do this using flutter to create android as well as ios app.
You are looking for the stack widget here, develop your first screen and another one which you want to put on top. Put both in stack widget so one can come on top of another one.
On the screen which should be on top, make the first half of it transparent (which can be attained in different ways, one of it would be to use a Card with elevation of 0).
The most accurate answer would be do use an an showModalBottomSheet which we expand from the button into the screen and will also color the screen darker. Example code could be following:
await showModalBottomSheet<void>(
isScrollControlled: true,
context: context,
backgroundColor: Colors.white,
builder: (BuildContext context) {
return Container(width: MediaQuery.of(context).size.width, height: 200);
},
)
With the current answer you would have to write the entire funtionality for it by yourself, which could be quite unnecessary when there is already a widget out there for exactly this case
Is there a way of updating a page in flutter once you have navigated away from it?
So say I have page 1 which is a grid that has a bunch of thumbnail images that represent a list of my favorite images.
I click on one of the thumbnails and it takes me to another page that displays the image. On this page I click on a checkbox that removes it from my favorite images list. How can I then update the grid from the previous page to remove the image?
I don't have any code that I've tried because I'm fairly new to Flutter and I literally have no idea how to do it.
You should be using a database of some sort to handle your favorite pictures list.
Anyway you can return back the id/flag/favorite_status of the image to the first screen.
RaisedButton(
onPressed: () {
Navigator.pop(context, iamgeId);
},
child: Text('Remove From Favorite!'),
);
In the first screen, remove the imageId from the list. and setState
Checkout return data from a screen with an interactive example
I am use Flutter for web for make website. I need make foreground scroll, but background not scroll like normal website. For example: codemagic.io .
I cannot use Scaffold background because I want use use CustomPainter for custom background.
I am try use Stack, but issue is I need Center Widgets in ScrollView, and if I do this then the CustomPainter is not start from top of page:
Stack(
children: <Widget>[
Center(
child: SingleChildScrollView(
child:
Stack(children: <Widget>[
CustomPaintWidget(),
Widgets(),
],),
Anyone know solution?
Thanks!
You have two stacks here and one is only holding one widget (basically pointless for what you want to do). Put a widget on the bottom index of that stack (0) and make it the size of its container. You could use LayoutBuilder to get the size of its parent widget. Then place the singlechildscrollview on top of that.