A widget can only either be stateful or stateless. Its appearance and properties remain unchanged throughout the lifetime of the widget. A stateless widget will never change. Some examples include Icon, IconButton, and Text.
Stateful widget on the other hand is dynamic, meaning that the widget can change. For example, it can change its appearance in response to events triggered by user interactions or when it recieves data. Checkbox, Radio, Slider, InkWell, Form, and TextField are examples of stateful widgets.
There are Text widgets which display the information of odd/even and the current number. There are also floating action button widgets which serves to increment or decrement the number being displayed in the page. Lastly there is a stateful widget for the class which holds all of the page and its content.
Every StatefulWidget has a State Object. This State Object keeps a track of the variables and functions that we define inside a StatefulWidget. The setState() function notifies the the framework that the internal state of the object has changed in a way that might impact the user interface in the subtree which causes the framework to schedule a build for the State object. If you just change the state without calling setState, the framework might not schedule a build and the UI might not be updated to reflect the new state.
Variables created inside the class can be affected when calling the setState function and updating the content of the variable.
Const and final keyword are used to assign a constant value to a variable. Both const and final are used to hardcode the values of the variable and it cannot be changed in the future, neither any kind of operations performed can alter its value. The difference is the const makes the variable constant from compile-time only. Using const on an object, makes the object’s entire deep state strictly fixed at compile-time and that the object with this state will be considered frozen and completely immutable.
Made a function to decrement the counter only if the counter is not 0. If the counter is 0, set the variable of _isVisible to false.
Created three additional variables each for the text of odd/even, the text color, and boolean value for visibility.
Created a function info() which updates the text to odd or even and the text color to blue if odd and red if even.
Call the info() function after every update in the increment and decrement function.
Replace the text to the _text variable and the color set to the _color variable.
Created a new container of Floating Action Button with its position in center. Made a child with a row direction and the main axis alignment space between to make the widgets on the left and right side of the app. Added padding for the widgets. Created two widgets, 1 for increment counter and 1 for decrement counter using the functions created before for the value in onPressed. Added the icons for increment and decrement widget. Use the visibility class for the decrement counter with the value of visible as the _isVisible function which updates to false if the counter is 0.
The Navigator uses the concept of the data structure stack. In Flutter, when we navigate to another screen, we use the push methods and the navigator widget adds the new screen on top of the stack. Naturally, the pop methods would remove that screen from the stack. The push replacement however, replaces the current route of the navigator by pushing th e fiven route and then disposing the previous route once the new route has finished animating in. Making the user unable to go back to the previous page.
Container -> Creates a rectangular visual element which can have margins, padding, constraint, and can be decoratd with a BoxDecoration such as a bckground, a border, or a shadow
Row, Column -> Create flexible layouts in both the horizontal (Row) and vertical (Column) directions. The design of these objects is based on the web’s flexbox layout model.
Text -> Creates a run of styled text
AppBar -> Consists of a toolbar and potentially other widgets
Drawer -> A Material Design panel that slides in horizontally from the edge of a Scaffold to show navigation links in an application.
Scaffold -> Implements the basic Material Design visual layout structure. This class provides APIs for showing drawers, snack bars, and bottom sheets.
Padding -> Widget that insets its child by the given padding.
Form -> Container for grouping together multiple form field widgets.
Center -> Centers the child within itself.
TextFormField -> Widget that wraps a TextField widget in a FormField.
Card -> Widget with bland space or panel with round corners and a slight elevation on the lower side. It comes with many properties like color, shape, shadow color, etc which lets developers customize.
SingleChildScrollView -> A box in which a single widget can be scrolled.
ListTile -> A list tile contains one to three lines of text optionally flanked by icons or other widgets, such as check boxes. The icons (or other widgets) for the tile are defined with the leading and trailing parameters.
Icon -> A graphical icon widget drawn with a glyph from a font described in an IconData such as material's predefined IconDatas in Icons.
Navigator -> A widget that manages a set of child widgets with a stack discipline.
DropDownButton -> A Material Design button for selecting from a list of items.
FloatingActionButton -> A circular icon button that hovers over content to promote a primary action in the application.
There are a lot of events that exists in flutter. Some of them are PointerDownEvent, PointerMoveEvent, PointerUpEvent, PointerCancelEvent. Gestures can also dispatch multiple events, such as onTap, onTapDown, onTapUp, onHover, onFocusChange, onDoubleTap, onPressed, onLongPress, onHover, onVerticalDragStart, onHorizontalDragStart, onPanStart, and many more.
Some of the funtionalities include:
OnPressed -> Called when a button is tapped or otherwise activated.
onHover -> Called when a pointer enters or exit the button response area.
onLongPress -> Called when a button is long-pressed.
onFocusChange -> Handler called when the focus changes.
The Navigator uses the stack data structure. To switch to a new route, use the Navigator.push() method. The push() method adds a Route to the stack of routes managed by the Navigator. Where does the Route come from? You can create your own, or use a MaterialPageRoute, which is useful because it transitions to the new route using a platform-specific animation. To close the second route and return to the first, you can use the pop() method which removes the current Route from the stack of routes managed by the Navigator.
To navigate to pages without pushing and popping from the stack, you can use the PageView to achieve it.
Created two more dart files for form and data display.
Added a drawer in the three files for navigation.
Created a form in the budget_form dart file consisting of inputs for the Title, Amount, Type, Date picker and a save button.
When saved, the data will be put in a list, which will be added to another list created by the class Data
In the budget data dart file, created cards containing the information saved from the budget form dart file by iterating through the list from the Data class in the budget form dart file.
It is possible to retrieve JSON data without making a model first. Using the jsonDecode() function, you can decode the JSON dta with the JSON string as the method argument. IT returns a Map<String, dynamic> meaning that the value types are unknown until runtime. You lose most of the statically typed language features: type safety, autocompletion and most importantly, compile-time exceptions. Your code will become instantly more error-prone.
Container -> Creates a rectangular visual element which can have margins, padding, constraint, and can be decoratd with a BoxDecoration such as a bckground, a border, or a shadow
Row, Column -> Create flexible layouts in both the horizontal (Row) and vertical (Column) directions. The design of these objects is based on the web’s flexbox layout model.
Text -> Creates a run of styled text
AppBar -> Consists of a toolbar and potentially other widgets
Drawer -> A Material Design panel that slides in horizontally from the edge of a Scaffold to show navigation links in an application.
Scaffold -> Implements the basic Material Design visual layout structure. This class provides APIs for showing drawers, snack bars, and bottom sheets.
Padding -> Widget that insets its child by the given padding.
Card -> Widget with bland space or panel with round corners and a slight elevation on the lower side. It comes with many properties like color, shape, shadow color, etc which lets developers customize.
ListTile -> A list tile contains one to three lines of text optionally flanked by icons or other widgets, such as check boxes. The icons (or other widgets) for the tile are defined with the leading and trailing parameters.
FloatingActionButton -> A circular icon button that hovers over content to promote a primary action in the application.
ElevatedButton -> An elevated button is a label child displayed on a Material widget whose Material.elevation increases when the button is pressed.
TextSpan -> An immutable span of text that has a style property to give style to the text. It is also having children property to add more text to this widget and give style to the children.
RichText -> The RichText widget displays text that uses multiple different styles. The text to display is described using a tree of TextSpan objects, each of which has an associated style that is used for that subtree.
Wrap -> A widget that displays its children in multiple horizontal or vertical runs.
FutureBuilder -> Widget that builds itself based on the latest snapshot of interaction with a Future.
ListView.builder -> Takes an IndexedWidgetBuilder, which builds the children on demand. This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.
Firstly, we need to create a model for the JSON data which can be obtained from several websites such as Quicktype, and add it to a dart file. Next we need to add the http package to perform the HTTP request. Run the command 'flutter pub add http' on the project terminal to add it and add '' after the applicaiton tag in the ANdroidManifest.xml to alow for internet access.
In the page you want to retrieve the data, import the http package, dart:convert, and the model dart file. Create a stateful widget ,and get the JSON data using th eFUture widget and http.get using the url containing the data. Convert the data using the fromJson method of the model class and add it to a list.
To display the data, use the FutureBuilder function with the future being the function fething the data and for the builder, create the data representation using ListView.builder.
In the body of the app, make the title of the movie in the top center using the Row widget, and make it bold. For the remaining details, use the Row widget to make it at the start and use the RichText, TextSpan widgets to make some of the texts bold. Lastly make a back button using the floatingActionButton widget and in the onPressed event, pop the page to go back to the watchlist page.
Created function convert to switch the value of the watched for the onChanged event of the checkbox.
Created the BorderColor function to set the color for the border according to the status of watched.
