Flutter is an open-source UI software development kit (SDK) developed by Google, which allows for rapid building of mobile, web, and desktop applications. One of the appeals of Flutter is its ability to build applications for multiple platforms from a single codebase. In this course, we will examine the basic code structure of the \nThe The basic Let’s analyze the example code above and look at the roles of each part.<\/p>\n We import the packages necessary to use Flutter’s features. The The The The While you can create a simple application using the basic code, it can be improved by adding more features. Below is an example that adds a button to the basic application, which changes the text when clicked.<\/p>\n In the example above, we used When the button is clicked, we call the The UI in Flutter consists of widgets. Every UI element is represented as a widget, and widgets can be combined to form complex UIs. Widgets can be broadly divided into two categories:<\/p>\n A Flutter project is composed of several directories and files. The basic file structure generated is as follows:<\/p>\nmain.dart<\/code> file, which is central to Flutter applications.<\/p>\n1. Role of the main.dart File<\/h2>\n
main.dart<\/code> file is the entry point of a Flutter application. It is the first file executed when the application runs, and within this file, the main structure and UI of the application are defined.
\n
\nMain Roles:<\/strong><\/p>\n\n
1.1 Basic Structure<\/h3>\n
main.dart<\/code> file starts with the following structure:<\/p>\n\n
\n import 'package:flutter\/material.dart';\n\n void main() {\n runApp(MyApp());\n }\n\n class MyApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n title: 'Flutter Course',\n home: Scaffold(\n appBar: AppBar(\n title: Text('Main Page'),\n ),\n body: Center(\n child: Text('Hello, Flutter!'),\n ),\n ),\n );\n }\n }\n <\/code>\n <\/pre>\n2. Code Components<\/h2>\n
2.1 Importing Necessary Packages<\/h3>\n
flutter\/material.dart<\/code> package provides Material Design UI components, allowing for easy routing and state management.<\/p>\n2.2 main() Function<\/h3>\n
main()<\/code> function, which is the entry point of the Flutter application, executes the root widget through the runApp()<\/code> function. Here, we instantiate and run the MyApp<\/code> class.<\/p>\n2.3 StatelessWidget<\/h3>\n
MyApp<\/code> class inherits from StatelessWidget<\/code>. This means it does not have state and is suitable for cases where the data used to draw the UI does not change.<\/p>\n2.4 build() Method<\/h3>\n
build()<\/code> method is responsible for creating the widget’s UI and takes BuildContext<\/code> as a parameter. Within the build()<\/code> method, widgets like MaterialApp<\/code> and Scaffold<\/code> are defined. The Scaffold<\/code> widget provides a basic app layout.<\/p>\n3. Improving the Example Application<\/h2>\n
\n
\n import 'package:flutter\/material.dart';\n\n void main() {\n runApp(MyApp());\n }\n\n class MyApp extends StatefulWidget {\n @override\n _MyAppState createState() => _MyAppState();\n }\n\n class _MyAppState extends State3.1 Adding StatefulWidget<\/h3>\n
StatefulWidget<\/code> instead of StatelessWidget<\/code> since the state can change. StatefulWidget<\/code> has internal state and is used when the UI may change based on that state.<\/p>\n3.2 setState() Method<\/h3>\n
_changeMessage()<\/code> method to update the state and use setState()<\/code> to redraw the UI. This allows us to create a dynamically responsive UI for the application.<\/p>\n4. Widget Structure of Flutter<\/h2>\n
\n
5. Flutter Project Structure<\/h2>\n