Basics Concepts of Flutter. The First App
The basic Functions:
- main(): your main function will likely initiate any pre-processing needed for your program, and end with a function call that runs the rest of your app.
- runApp(): is a Flutter function that runs your Flutter app
- MaterialApp(): An application that uses Material Design.
- Scaffold(): which provides standard app elements like an AppBar and a Drawer
- AppBar():An app bar consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar.
- Container(): A convenience widget that combines common painting, positioning, and sizing widgets.
- Center(): A widget that centers its child within itself.
child: is for only one son
- child: Text('Widget Text')
children is for more than one son
- children: [Text('Widget Text 1'), Text('Widget Text 2')]
- For more information about Flutter: https://api.flutter.dev/flutter/widgets/widgets-library.html
A widget that does not require mutable state.
A stateless widget is a widget that describes part of the user interface by building a constellation of other widgets that describe the user interface more concretely. The building process continues recursively until the description of the user interface is fully concrete.
- For more information about Statelles Widget: https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html
A widget that has mutable state.
State is information that (1) can be read synchronously when the widget is built and (2) might change during the lifetime of the widget. It is the responsibility of the widget implementer to ensure that the State is promptly notified when such state changes, using State.setState.
-
setState(): calling setState notifies the framework that the internal state of this object has changed in a way that might impact the user interface in this subtree, which causes the framework to schedule a build for this State object.
-
ElevatedButton(): Use elevated buttons to add dimension to otherwise mostly flat layouts, e.g. in long busy lists of content, or in wide spaces. Avoid using elevated buttons on already-elevated content such as dialogs or cards.
- For more information about Stateful Widget: https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html
A text field lets the user enter text, either with hardware keyboard or with an onscreen keyboard.
The text field calls the onChanged callback whenever the user changes the text in the field. If the user indicates that they are done typing in the field (e.g., by pressing a button on the soft keyboard), the text field calls the onSubmitted callback.
To control the text that is displayed in the text field, use the controller. For example, to set the initial value of the text field, use a controller that already contains some text. The controller can also control the selection and composing region (and to observe changes to the text, selection, and composing region).
- TextEditingController: a controller for an editable text field. Whenever the user modifies a text field with an associated [TextEditingController], the text field updates [value] and the controller notifies its listeners. Listeners can then read the [text] and [selection] properties to learn what the user has typed or how the selection has been updated.. can also be used to provide an initial value for a text field. If you build a text field with a controller that already has text, the text field will use that text as its initial value.
- For more information about TextField: https://api.flutter.dev/flutter/material/TextField-class.html
An alert dialog (also known as a basic dialog) informs the user about situations that require acknowledgement. An alert dialog has an optional title and an optional list of actions. The title is displayed above the content and the actions are displayed below the content.
- FloatingActionButton(): A floating action button is a circular icon button that hovers over content to promote a primary action in the application. Floating action buttons are most commonly used in the Scaffold.floatingActionButton field. Use at most a single floating action button per screen. Floating action buttons should be used for positive actions such as "create", "share", or "navigate". If the onPressed callback is null, then the button will be disabled and will not react to touch. It is highly discouraged to disable a floating action button as there is no indication to the user that the button is disabled. Consider changing the backgroundColor if disabling the floating action button.
- For more information about AlertDialog: https://api.flutter.dev/flutter/material/AlertDialog-class.html
A material stepper widget that displays progress through a sequence of steps. Steppers are particularly useful in the case of forms where one step requires the completion of another one, or where multiple steps need to be completed in order to submit the whole form. The widget is a flexible wrapper. A parent class should pass currentStep to this widget based on some logic triggered by the three callbacks that it provides.
- For more information about Stepper: https://api.flutter.dev/flutter/material/Stepper-class.html
A Material Design widget that displays a horizontal row of tabs. Typically created as the AppBar.bottom part of an AppBar and in conjunction with a TabBarView.
- Tab(): A Material Design TabBar tab. If both icon and text are provided, the text is displayed below the icon.
- TabBarView(): A page view that displays the widget which corresponds to the currently selected tab. This widget is typically used in conjunction with a TabBar.
- For more information about TabBar: https://api.flutter.dev/flutter/material/TabBar-class.html
This is the same that TabBar, but the Tab is down now. This is possible for BottonNavigationBar class.
- BottonNavigationBar: A material widget that's displayed at the bottom of an app for selecting among a small number of views, typically between three and five. The bottom navigation bar consists of multiple items in the form of text labels, icons, or both, laid out on top of a piece of material. It provides quick navigation between the top-level views of an app. For larger screens, side navigation may be a better fit. A bottom navigation bar is usually used in conjunction with a Scaffold, where it is provided as the Scaffold.bottomNavigationBar argument.
- For more information about BottomNavigationBar: https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html
In the Navigate to a new screen and back recipe, you learned how to navigate to a new screen by creating a new route and pushing it to the Navigator. However, if you need to navigate to the same screen in many parts of your app, this approach can result in code duplication. The solution is to define a named route, and use the named route for navigation. To work with named routes, use the Navigator.pushNamed() function. This example replicates the functionality from the original recipe, demonstrating how to use named routes using the following steps:
- Create two screens.
- Define the routes.
- Navigate to the second screen using Navigator.pushNamed().
- Return to the first screen using Navigator.pop()
- For more information about Navigate with named routes: https://docs.flutter.dev/cookbook/navigation/named-routes
In apps that use Material Design, there are two primary options for navigation: tabs and drawers. When there is insufficient space to support tabs, drawers provide a handy alternative. In Flutter, use the Drawer widget in combination with a Scaffold to create a layout with a Material Design drawer. This recipe uses the following steps:
- Create a Scaffold.
- Add a drawer.
- Populate the drawer with items.
- Close the drawer programmatically.
- For more information about Navigate with Drawers: https://docs.flutter.dev/cookbook/design/drawer
It can be useful to briefly inform your users when certain actions take place. For example, when a user swipes away a message in a list, you might want to inform them that the message has been deleted. You might even want to give them an option to undo the action. In Material Design, this is the job of a SnackBar. This recipe implements a snackbar using the following steps:
- Create a Scaffold.
- Display a SnackBar.
- Provide an optional action.
- For more information about Snackbar: https://docs.flutter.dev/cookbook/design/snackbars
A scrollable list of widgets arranged linearly. ListView is the most commonly used scrolling widget. It displays its children one after another in the scroll direction.
There are four options for constructing a ListView:
-
The default constructor takes an explicit List of children. This constructor is appropriate for list views with a small number of children because constructing the List requires doing work for every child that could possibly be displayed in the list view instead of just those children that are actually visible.
-
The ListView.builder constructor 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.
-
The ListView.separated constructor takes two IndexedWidgetBuilders: itemBuilder builds child items on demand, and separatorBuilder similarly builds separator children which appear in between the child items. This constructor is appropriate for list views with a fixed number of children.
-
The ListView.custom constructor takes a SliverChildDelegate, which provides the ability to customize additional aspects of the child model. For example, a SliverChildDelegate can control the algorithm used to estimate the size of children that are not actually visible.
- For more information about ListView: https://api.flutter.dev/flutter/widgets/ListView-class.html
ListView with items that can be scrolled infinitely in both directions. Replace your existing ListView with InfiniteListView. Builder pattern must be used because of its infinite nature. This is possible thanks to add dependens like a generator word randoms.
- dependencies: english_words: ^4.0.0
- main(): import 'package:english_words/english_words.dart';
