i have this design(shown in the photo) which I want to code, I tried making the shape as an svg pic and put it in a container but I don't think that's the best way and also there is a margin on the sides that won't go even when I remove the padding(shown in the picture on the right)
my code is:
Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Align(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(SizeConfig.blockSizeHorizontal * 2),
child: buildLocalImage('assets/images/shape.svg'),
),
Your options are:
Clipping using CustomClipper class
Drawing using CustomPainter class
Drawing using RenderBox class
Stacking clipped containers with Stack class
Using images
It's unclear what the best option is because I am not sure what you will do after this is drawn (gesture detect, position, etc). But I would say option 2 is generally the most common.
The margin propably stems from the SafeArea. Since you are in the body of a Scaffold, you probably do not need it there. Try to remove the SafeArea first, before you try sommething like a custom painter.
Also, you could use a package like flutter_svg to embed the SVG shape into your app. This allows you to use the usual fitting parameters to position the shape.
To position the logo according to your mockup, you have to stack it over the SVG background. Use the stack widget for that.
Related
Can you help me solve this problem
Where the word beach should be at the bottom of the picture, but it does not go down
Use second widget of Stack as Expanded widget instead of Container widget:
Expanded(
child: Align(
alignement: FractionalOffset.bottom,
child: Text(.................)
))
You can switch the Image and container order in the Stack children's or better option you can use Positioned() widget to give the container that includes the text a specific position.
Flutter Dev videos:
https://youtu.be/liEGSeD3Zt8?t=49
https://youtu.be/EgtPleVwxBQ
flutterdartpostionedstackwidget
I have been searching for a way to scroll to the bottom of the ListView widget automatically after retrieving data from firebase database. I have seen a number of solutions but they do not work for me.
I find that scrollController.postion.maxScrollExtent is always 0.0. I don't want to use the reverse property of the listView either as that doesn't give me exactly what I want even though very close.
Below is a snippet of the code. When I use chatController.position.maxScrollExtent the value is 0.0 and not the value of the size of the ListView. If I use a listener that listens to scrolls then I see the value of chatController.position.maxScrollExtent but that is not the behaviour I want. I don't want to manually initiate a scroll for the app then go to the bottom of the list. It must do that as I open the app.
Any help will be greatly appreciated. Thanks
Container(
child: Column(
children: <Widget>[
Expanded(
child: ListView(
controller: chatController,
//shrinkWrap: true,
children: [getConversation()], //list of chats wrapped in a Column widget
)
),
)
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.
I have a login screen with a logo on top. I want the login form to be exactly in the screen center (not in the center of the space below the logo). So far I managed to achieve that using Stack, roughly like this:
Stack(
children: [
Positioned(
child: Logo(),
left: 0,
top: 0,
),
Column(
children: [LoginForm()],
mainAxisAlignment: MainAxisAlignment.center,
),
],
)
In general, I am quite happy with how it looks, however, when the soft keyboard pops up, the visible screen size and the notion of the center change, the form moves up and overlaps with the logo. I know I can prevent widgets from resizing at all, but can I just allow the form move up only as long as it does not overlap with the logo?
You can use ListView instead of Column that will avoid overlapping with the logo and when keyboard opens, it will automatically scroll up the form.
Also note that, once you use ListView, use shrinkWrap: true inside it, as it'll only occupy the space it needs.
Hope this answer helps.
I need some help with a layout.
I need put some widgets inside a "Scrollview" but keep the buttoms in the bottom space of screen.
Image with a "Scrollview" with some textFields inside, and under de "Scrollview" a Rows containing two buttons
So if I change orientation the Layout will keep buttons at bottom and will scroll the widgets above.
How can I made it in flutter, I tried to use the Stack, Listview and others approaches, but i didn't have luck
Multiple ways. I recommend you either using a Scaffold or a Column:
If you are already using a Scaffold in your app, just add bottomNavigatorBar as a Parameter, your bar you want to have at the bottom in it and make sure the rest of your layout is located under it's body tag.
Otherwise you could use a Column:
Column(
children: <Widget> [
Expanded(child:ScrollView(..),),
yourBottomBar,
] )
Or Flutter also has a Positioned widget which you can use in combination with a Stack:
Stack(
children: [
// some stuff
Positioned(
bottom: 0,
child: yourBottomBar
),
],
)