This video assumes that you are familiar with the development of native mobile platforms, such as iOS using Swift or Android using Kotlin... But you don’t need to be an expert anyway. These videos will show you how to build a Flutter application from scratch, so if you are a brand new person, you will catch up well.
What is Flutter?
Simply put, Flutter is a application development kit created by Google for building cross-platform apps. Flutter applications consist a different packages, plugins, and widgets-but that's not all. Flutter is a process, a philosophy, and a community. Flutter is awesome. You can build a high-performance, high-quality application that looks great very quickly. This video will show you how to do it. Flutter is suitable for novice or experienced developers who want to launch mobile applications with minimal overhead. Flutter is suitable for those who want to make apps that can run on multiple devices now or in the future.
Great things about Flutter
Flutter is open source. Flutter uses the Dart programming language. One of Flutter's best features is hot reloading. Flutter is very attractive, it uses Google’s Material Design out of the box. Some of the world’s largest companies’ popular applications are built with Flutter. Google Ads, Google Stadia, Rive, New York Times
When not to use Flutter
Flutter is not the best tool for every application. Here are some areas where Flutter is an evolving platform. For games and audio, game engine technologies such as Unity or Unreal are more suitable for this. Applications with specific native SDK requirements. Some platforms do not yet support Apple Bitcode, which means it does not support watchOS, tvOS, or some iOS application extensions. Flutter has a modular layered architecture. This allows you to write application logic once and have consistent behavior across platforms, even if the underlying engine code differs from platform to platform. First, please visit the flutter.dev website. You can find the link in the description below. This portal is the true source of any installation instructions or API changes that occurred between the publication of this book and your reading of this book. If there is any inconsistency, the information on flutter.dev shall prevail.
The first step is to download the SDK. You can follow the instructions on flutter.dev to download the SDK. After this is done, you will have access to the Flutter command line application, which is your starting point. To check if you set it up correctly, run the following command in the terminal: flutter doctor In this sample output, Flutter Doctor found a series of problems: mainly lack of Java, outdated Android toolchain, and lack of CocoaPods, Android Studio, and Google Chrome. The Flutter team officially supports three editors: Android Studio, Visual Studio Code, and Emacs. However, there are many other editors that support the Dart language, use the Flutter command line, or have third-party Flutter plugins.
In addition, Flutter Doctor will tell you to install the Android Studio Flutter plugin, which will also trigger the installation of the Android Studio Dart plugin. You will learn more about hot reload in a future video, but now try the minimum settings and return to this video. For the design pattern in the first application. All you need to start a new application is to set up Flutter. If flutter doctor shows no errors, you can start.
Creating a new appThere are two easy ways to start a new Flutter application. In the previous chapter, you created a new application project through the IDE. Alternatively, you can use the flutter command to create an application. You will use the second option here. Vibrate creation! Build and run, and you will see the same demo application. An off-the-shelf application is a good starting point, because the flutter create command puts all the boilerplate together for you to get up and running. But this is not your application. It is actually MyApp, as you can see near the top of main.dart.
The Main function is the entry point of the code when the application starts. runApp tells Flutter which is the top widget of the application. The widget's build() method is the entry point for combining other widgets to create a new widget. MaterialApp uses Material Design and is a widget that will be included in MyApp. Now we will import a prepared application with a good design pattern and try to install it on our host and add some features so that we can use it as a CMS or administrator.
A demo application that shows how Flutter provides an excellent multi-platform experience for iOS, Android, MacOS, Windows, Linux, and the Web. Flutter Folio was built by gskinner in cooperation with Google, deliberately considering the user expectations, input devices and idioms of each platform to ensure that you feel at home on each device. After setting up Flutter, you can use the default stable channel or switch to the latest development version to get the latest fixes for the desktop web. Flutter upgrades. If you have never run a desktop build before, you need to enable it with a one-time command for the current platform After entering the development environment and enabling the desktop, you can run the application. flutter run -d web
If you restart the IDE, you should also see the new startup options for the current desktop platform. This repository includes a set of Cloudinary and Firebase keys in the free pricing plan. Depending on the flow rate, these may reach the limit. If this happens, you need to provide your own key to run the application locally, which can be found in AppKeys.dart. These limits should be updated monthly, so your mileage will vary. If you study this project, you will definitely see the benefits of this Provider approach. You can use refactoring to rename the necessary classes. For now, we will continue to use a simple application and expand it further in a few videos. This way we can have everything from scratch and understand the different parts well.
You have taken the first step in making the application your own by customizing the MaterialApp body. You will finish cleaning up the application in the next section. Please comment your opinion below. An empty application is not very useful. The app should have a nice list of articles for users to scroll through. However, before displaying these, you need data to populate the UI. This is the beginning of the Page model with labels and images. You also need to provide some data for application display. In a fully functional application, you can load this data from the Firebase database and JSON-based API. However, for the sake of simplicity when you start using Flutter, you will use hard-coded data in this video.
You have created a list of images, but there are no images in your project yet. To add them, go to the Finder and copy the asset folder from the top level of the project folder structure. When finished, it should be at the same level as the lib folder. In this way, the application will be able to find the image while you are running. But just adding assets to the project does not show them in the application. To tell the application to include these assets, open pubspec.yaml in the project root folder and add folders according to the asset configuration.
Displaying the listBack to main.dart, you need to import the data file so that the code in main.dart can find it. Add the import to the top of the file, under another import line. Put the list in a card Glad you are now displaying real data, but this is just an application. To take things to the next level, you need to add an image to match the title. For this, you will use cards. In Material Design, a card defines an area of the UI where you can lay out relevant information about a specific entity. For example, a card in a music application may have labels for the album name, artist, and release date, as well as an image of the album cover, and may also have a star rating control. Please note that Card will not default to the flat square at the bottom of the widget. Material Design provides standard rounded corner radii and shadows.
As the layout becomes more complex and interactivity is added, considering the widget tree helps explain the application. Fortunately, you don't have to draw a chart every time. In Android Studio, when your application is running, open Flutter Inspector from the View Tool Windows Flutter Inspector menu. This will open a powerful UI debugging tool. This view shows you all the widgets on the screen and how they are composed. When scrolling, you can refresh the tree. You may notice that the number of cards has changed. That's because List does not save every item in memory at once to improve performance.
Making it look nice
The default cards look good, but they are not as good as they should be. With some additional features, you can make the card more beautiful. These include wrapping widgets in layout widgets, such as Padding or specifying other style parameters. Using the Widget inspector, you will see the Padding and SizedBox widgets added. When you select a widget (such as SizedBox), it will show you all its real-time properties in a separate pane, including the properties you explicitly set and the properties inherited or set by default. You now have a beautiful list, but the application is not yet interactive. The best part is to show the user detailed information about the recipe when the user clicks on the card. You will start to achieve this by making the card react to clicks.
Creating an actual target pageThe result page is obviously just a placeholder. Not only is it ugly, but because it doesn't have all the normal page decorations, users are now stuck here, at least on iOS devices without a back button. But don't worry, you can solve this problem! This will create a new StatefulWidget with an initializer to display the details of the page to be displayed. This is a StatefulWidget, because you will add some interactive state to this page later. The body of the widget is the same as you have already seen. There are a few things to note here. Next, return to main.dart and add the import line to the top of the file. Perform a hot restart by selecting Run Flutter Hot Restart from the menu to set the application state back to the original list. Clicking on the page card will now display the PageDetail page. To complete the detail page, you need to add an additional description to the SitePage model.
Key points
Use flutter create to build a new application. Use widgets to compose a screen with controls and layout. Use widget parameters for style settings. The MaterialApp widget specifies the application, while the Scaffold specifies the high-level structure of a given screen. The state allows interactive widgets. When the state changes, you usually need to hot restart the application instead of hot reload. In some cases, you may also need to completely rebuild and restart the application. These pages list all the parameters and usually have an interactive section in the browser where you can experiment. Please comment your suggestions and comments below. If you like this, click to subscribe!
Gallery
https://gallery.flutter.dev/
Comments
Post a Comment