I'm new to Flutter and I found a pretty cool design of a todoapp on Dribble so I wanted to create the app.
Here's the design :
I wonder how with the my callBack Function of my CheckBox I could change the color of the text part of the tile to this blue.
My tile is currently a row containing a checkbox and a Container with the text in. So I would like to when i click on the checkbox, the background color of my container turns to blue.
I dont' have a any idea how to do that.
If you have some ideas please tell me.
Flutter apps work with app states, these states contain the information about the screens pushed by the app.
What you need to do is to update the state of your current widget, and change the values that set that background to X color.
Here you have multiple docs about state management: https://flutter.dev/docs/development/data-and-backend/state-mgmt/options, I really recommend for beginners to start with the setState method as is the easiest one.
Also, if you don't know how to manage states I will really recommend to follow the docs to understand how widget works and are build over flutter apps: https://flutter.dev/docs/development/ui/widgets-intro
Well, I just needded to put this in the color property of my container knowing that isChecked is true when my checkbox is clicked.
child: Container(
height: 50,
decoration: BoxDecoration(
borderRadius : BorderRadius.circular(15),
color: widget.isChecked ? Color(0xFF2765f9) : Color(0xFF292E3C),
Related
I'm new to flutter and I don't know how to do it, please tell me how to do it or a working option. because I've been trying for a very long time
https://sun9-east.userapi.com/sun9-18/s/v1/ig2/NhRxi0YKSHPdqxIaG37XCWUcygL--5igPancpM8aVbjVuZazevntosns_TcgcXzYaIZN37dpzHlCa7o9Hr41pz67.jpg?size=2142x482&quality=95&type=album
https://sun9-west.userapi.com/sun9-63/s/v1/ig2/IVIkAOvJzFSbBD5VsqgncEuhvZAq8D3EkMKSnzK8wXffnPiB2SvLE2Q2sUkNjvvJp9-fLYzh2Wp3PUv8mD6zBLVe.jpg?size=1550x949&quality=95&type=album
https://sun9-west.userapi.com/sun9-50/s/v1/ig2/WdrgTVpnxrH7mBUe1L3a3SvAepAIB4zxvl_CQKJim1O0JxddGe-qQN5JLiN-WfIcgecwXdwGGZ7UNHScnpP3TtN1.jpg?size=1578x239&quality=95&type=album
https://sun9-north.userapi.com/sun9-81/s/v1/ig2/ZQZqB1bibWQUseKiajkYuHETzNeTGSV1dc1D5IEHXiUlwuYS-Cebt9uT5VknD3xWBsXjLNkMiAk_siV287kUE0JG.jpg?size=2142x482&quality=95&type=album
TextFormField(
decoration: InputDecoration())
There's no possible option in the TextField or any equivalent widget for user input.
You can easily replicate those interfaces with layout widgets like Column and Row. If there's a case where you want to overlay other widgets on the TextField then you can stack them using Stack.
Else, if you need more advanced editor-like features, you can refer to packages like this.
Well this weird bug seems to have appeared when i recently updated flutter and dart sdk via my android studio IDE.
It worked like a charm before...
here what happens :
this is what is expected
this is what i can have before a rebuild sometimes there is no notch at all...
So, to put words on the problem, the first picture is what i got so far and what i expect to have...
but recently, i did upgrade flutter N dart via the command line and had to face this weird bug...
Depending on the device here what i have :
first build of the screen : incomplete notch margin or even none at all !
when i do interact with a button or whatever provoke a screen rebuild : the notch is good again !
For example, the 2 screenshots come from the exact same screen, nothing changed but an only checkbox checked forcing the screen to rebuild after dirty state...
The problem is that i can't see anything to do since the code is as simple as :
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
...
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
floatingActionButton: SizedBox(
height: 85.0,
width: 85.0,
child: FittedBox(
child: FloatingActionButton(
So, is it a known Flutter bug and just have to wait for a bugFix ?
Or can i do something and, if so, what ?
Thanks in advance ! :)
I have the same issue trying to change the page with the navigator and rebuilding one page that has the same bottom app bar with this notch, I think that there is some bug between the fab notch and the navigator.
The workaround in my case is to keep the same route for all the pages and manage more pages changing the widget structure with the state, so if you have 3 pages with this notch you can keep the same page route and change one big sub-widget for each page changing, for example, a state variable that keeps the page like an int that encode one page with a specific number, and when you update this variable the interface rebuild changing this page widget.
This is my workaround, hope that this bug could be solved early but meanwhile this work.
Some images of the bug:
I have this rendering behavior after the first app start and after each rebuild on the same page, note that I have the fab notch in my homepage so at the first start the rendering is good:
I have this behavior after each change of route page with all the Navigator methods, even if in the page the bottom app bar has the same configuration and should render the notch:
If could help someone I recreate the navigator with an inherited widget and a stateful widget on top of the widget tree, this approach gets around the bug, here is my app implementation:
https://github.com/simone-viozzi/progetto-programmazione-mobile/tree/main/flutter_app
Id like to create similar animation effect with press button in flutter like this
I tried to find some similar widget on https://pub.dev/ without success. Any Idea how to create it?
Use materialappbutton to get hover animation effect.
The only thing I can think of is working with a gradient which you adapt in a stateful way on hover.
See the below answer for how to make a gradient border:
Outlined transparent button with gradient border in flutter
I'm currently learning flutter and i quiet appreciate the learnng curve. But I have a challenge. The tutorials i have what they kept more emphasis on reading more about flutter widget on flutter.io to know more about the widget. I have done that but i still dont understand it.
E.g: The container class properties have a decoration property. I went to check it on flutter site and i saw it there. But in the decoration properties flutter didn't add BoxDecoration. So how do one know that BoxDecoration must be called when on is using the decoration property of the Container class.
decoration: BoxDecoration(
color:Colors.teal,
borderRadius:BorderRadius.circular(12,
strong text
The Container.decoration field doesn't expect a BoxDecoration, it expect a Decoration, which can be a BoxDecoration. In Flutter at the time of writing, you can have may Decoration implementation, each one having its use case:
BoxDecoration (of course)
FlutterLogoDecoration
ShapeDecoration
many other Decoration that can be found on the Flutter API...
The way you know what widget should be used depend only on what you want to have, and your use case.
For example, you have a widget (eg. RaisedButton) and you want to apply a ShapeBorder to it. The shape you will choose depend only to form you want your button to have.
It may be a RoundedRectangleBorder to apply a custom border radius, or a StadiumBorder to apply an harmonized elliptic border radius, and so on...
There is definitively no standard way to create or use widgets in Flutter, everything depend on you, and your knowledge :-)
So, you are in Container Class documentation and you see under Properties decoration → Decoration?. Now clicking on Decoration takes to Decoration Class documentation
Here you see on top that it belongs to painting library (Flutter > painting > Decoration abstract class). So, you go to painting library documentation and look for box decoration and you see BoxDecoration as Class.
Following are the question which needs to be answered?
1.How to set inset border in Flutter.(already tried Border() but no inset option)
2.How to remove Material statelesswidget from index class. I know that stateful widget and stateless widget both are in the material library.but I need another way through which I can display normal layout without using the stateless or stateful widget.
3.Currently, Flutter doesn't support SVG. is there any other way to put SVG in the layout.
I realize this isn't the best question - in the future try to ask 3 separate questions... but I'm going to answer it as best I can anyways.
1) I'm assuming you mean you want to inset your inner class. There are a few ways to do this, but the easiest is probably to use a container. This shows the inset types (similar-ish to how it works in HTML):
new Container(
margin: const EdgeInsets.all(15.0),
padding: const EdgeInsets.all(3.0),
decoration: new BoxDecoration(
border: new Border.all(color: Colors.blueAccent)
),
child: ...,
)
2) I don't really understand the question. You don't technically need Stateful & Stateless widgets to be able to make a flutter app - you can simply return a cascade of objects from runApp in your main function... but if you want to display any data or basically do anything, you need to define your own widgets.
The provided widgets are the basic building blocks of a flutter application; they contain logic for layout and rendering in their implementations, whereas your own widgets can almost exclusively use the provided widgets rather than having to understand how that all works. But to keep track of your app's state, you need stateful widgets, and to encapsulate a set of widgets a stateful widget helps a lot! You generally end up with a very nested structure in flutter (which it is optimized for) - a different paradigm from some other frameworks and languages that instead use XML or a structure markup language - but using stateless widgets can help to keep the nesting to a reasonable size.
I highly recommend following the flutter codelab and the other tutorials etc on the flutter.io website as they will show you the basics.
3) Unfortunately, flutter doesn't support SVGs at the moment although there is some discussion on github about supporting them in the future.
I've utilized some vectors in my project by using a CustomPainter + canvas and converting the path/circle/lines to drawCircle, drawPath, drawLine. I've a semi-automated tool for doing that but it's pretty hacky and so not worth releasing at this point. Eventually I'd like to make it into a plugin but that won't be any time soon....