• The Answering of Questions on Flutter App Development
  • Deven Joshi
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: YueYong
  • Proofread by: ZX-Zhu

Through my lectures and workshops and personal communication with many students and developers, I realized that many of them have common problems and even misconceptions about Flutter and application development. So I decided to write an article to explain these common doubts. Note that this article is intended to explain some of the issues, not to elaborate on every aspect. For brevity’s sake, I may not cover some exceptions. Note that Flutter itself also has a frequently asked questions page, Flutter. IO, for various contexts, where I will focus more on the questions I see frequently. Although some of these are also included in the Flutter FAQ, I will try to give my opinion.

Where is the layout file? Why doesn’t Flutter have a layout file?

In the Android framework, we divide activities into layout and code. Therefore, we need to reference views to use them in Java. (Kotlin can avoid that, of course.) The layout file itself is written in XML and contains Views and ViewGroups.

Flutter uses a whole new approach instead of views, using widgets. In Android, the View is a component of the layout, but in Flutter, the Widget is almost everything. Everything from buttons to layout structure is a Widget. His advantage here is customisability. Imagine a button in Android. It has properties like text that let you add text to the button. But the button in a Flutter does not treat the title as a string, but as another widget. This means that inside buttons, you can have text, images, ICONS, and anything else you can imagine without breaking layout constraints. This also makes it easy to make custom widgets, whereas creating custom Views on Android is a pretty tough thing to do.

Isn’t drag-and-drop easier than laying it out in code?

In some ways, this is true. But many in the Flutter community prefer the code approach, but that doesn’t mean drag and drop can’t be done. If drag and drop is all your thing, Flutter Studio is a great resource THAT I recommend to help you generate layouts by dragging and dropping. It’s a tool I’m impressed with and curious to see how it will evolve in the future.

Link: flutterstudio. App

Does Flutter work like a browser? / How is it different from webView-based applications?

To answer this question simply: code written for a WebView or similar running applications must pass through multiple layers before they can be executed. Essentially, Flutter executes on both platforms by compiling into native ARM code. “Hybrid” applications are slow, slow, and look different from the platforms they run on. Flutter applications run much faster than hybrid applications. In addition, it’s easier to access native components and sensors using plug-ins than using webViews that don’t take full advantage of their platform.

Why does the Flutter project have Android and iOS folders?

There are three main folders in the Flutter project: Lib, Android and ios. ‘lib’ is responsible for handling your Dart file. The Android and iOS folders are used to actually build the application on their respective platforms and run the Dart files on them. They also help you add permissions and platform-specific functionality to your project. When you run a Flutter project, it builds based on the emulator or device running, using folders in it to perform Gradle or XCode builds. In short, these folders lay the foundation for Flutter code to run as a complete APP.

Why is my Flutter so big?

If you run the Flutter app, you know it’s fast. Very fast. How does it do it? When building the application, it actually uses all of the resource files, rather than just a specific one. Why does this help? Because if I change ICONS from one to another, I don’t have to completely rebuild the application. This is why the Flutter debug version is so big. When we create a release, we get only the resource files we need, and we get more accustomed sizes. The Flutter app is still slightly larger than the Android app, but it’s quite small, plus the Flutter team is always looking for ways to reduce the app’s size.

If I am new to programming and I want to start mobile development, should I start with Flutter?

There are two parts to the answer.

  1. Flutter is very easy to code for the same page and has much less code than Android or iOS apps. So for most applications, I don’t see major problems.
  2. One thing to keep in mind is that Flutter also relies on Android and iOS projects, and you need to be at least familiar with those project structures. If you want to write any native code, you definitely need experience on either or both platforms.

My personal opinion is learn Android/iOS for one or two months and then start learning Flutter.

What are Packages and plugins?

Packages allow you to import new tools or features into your application. There is a small difference between Packages and plugins. Packages are typically new components or code written purely in Dart, while plugins allow more functionality to use native code on devices. Typically on DartPub, Packages and plugins are both referred to as Packages, and the distinction is explicitly mentioned only when a new package is created.

What is the Pubspec.yaml file and what does it do?

Pubspec.yaml allows you to define application dependencies and declare your resource files, such as images, audio, video, etc. It also allows you to set constraints for your application. For Android developers, this is roughly similar to the build.gradle file, but the differences are also noticeable.

Why did it take so long to build the first Flutter application?

When a Flutter application is first built, device-specific APK or IPA files are built. Because it takes Gradle and XCode to build files, it takes time. The next time an application is restarted or hot reloaded, Flutter actually fixes changes on top of the existing application, enabling a quick refresh.

** Note: ** Changes made by hot reloads or restarts are not saved in device APK or IPA files. To make sure your app completes all changes on the device, consider stopping and restarting the app.

What does State mean? What is setState()?

Simply put, “State” is a collection of widget variable values. Anything that can be changed, like counters, text, etc., can be part of State. Imagine a counter application where the main dynamic is the counter count. When the count changes, you need to refresh the screen to display the new value. SetState () is essentially a way of telling the application to refresh and rebuild the screen with new values.

What are stateful and stateless widgets?

Too long, simply put: The Widget that allows you to refresh the screen is a stateful Widget. Otherwise, it’s stateless.

In particular, dynamic widgets with content that can be changed should be stateful widgets. Stateless widgets can only change content when parameters change, so they need to be done at a location in the Widget hierarchy. A screen or widget that contains static content should be a stateless widget, but to change content, it needs to be stateful.

How to deal with indentation and structure in Flutter code?

Android Studio provides tools to make building Flutter code easier. The two main methods are:

  1. Alt + Enter/ Command + Enter: This allows you to easily wrap and remove widgets and swap widgets in complex hierarchies. To use this feature, simply point your cursor at the widget declaration and press a button to give you some options. This sense of intelligence can sometimes seem like a godsend.
  2. DartFMT: DartFMT formats your code to keep it clean with hierarchy and indentation. It makes your code prettier after you accidentally move a few parentheses around.

Why do we pass functions to widgets?

We pass a function to a widget, basically saying “call this function when something happens.” Functions are the first class of objects in Dart and can be passed as arguments to other functions. Callbacks using interfaces such as Android (<Java 8) have too much boilerplate code for simple callbacks.

Java callback:

button.setOnClickListener(new View.OnClickListener() {
    @override
    public void onClick(View view) {
      // Do something here
    }
  }
);
Copy the code

(Note that this is just the code to set up the listener. Defining buttons requires separate XML code.)

The Dart equivalent:

FlatButton(
  onPressed: () {
    // Do something here
  }
)
Copy the code

(Dart does both the declaration and the setup callback.)

This becomes much cleaner and helps us avoid unnecessary complications.

What is the ScopedModel/BLoC model?

ScopedModel and BLoC (Business Logic Component) are common Flutter application architecture patterns that help to separate business logic from UI code and use fewer stateful widgets. There are better resources to learn these, and I don’t see the reason to explain them in a few lines.

I hope this article clears up some of the questions, and I’ll do my best to update the frequently asked questions I’ve encountered. If you enjoyed this article, please give me some encouragement, and be sure to comment if you’d like me to add other questions.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.