Flutter for Beginners

閱讀時間約 10 分鐘
Flutter for Beginners

Flutter for Beginners


Flutter is a powerful, open-source UI software development kit created by Google. It allows developers to build natively compiled applications for mobile, web, and desktop from a single codebase. With its rapid development cycles, customizable widgets, and native performance, Flutter has become a significant player in the app development landscape, appealing to both new and experienced developers.

Setting Up the Flutter Environment

Step-by-step instructions on installing Flutter and setting up the development environment:

  1. Download the Flutter SDK:
    • Visit the official Flutter website and download the Flutter SDK for your operating system.
  2. Extract the SDK:
    • Extract the downloaded zip file to a desired location on your file system (e.g., C:\src\flutter for Windows, /usr/local/flutter for macOS and Linux).
  3. Add Flutter to your path:
    • Update your environment variables to include the Flutter bin directory. This step varies by operating system:
      • Windows: Search for 'Edit environment variables for your account', then add the full path to flutter\bin.macOS/Linux: Open your terminal and run the command export PATH="$PATH:pwd/flutter/bin".
  4. Run Flutter Doctor:
    • Open a command prompt or terminal and run the command flutter doctor. This tool checks your environment and displays a report to the terminal window. The Command checks for issues with your environment and displays a report.
  5. Install a code editor:
    • Install a code editor that supports Flutter. Popular choices include Android Studio, VS Code, or IntelliJ IDEA. Make sure to install the Flutter and Dart plugins.

Understanding Flutter’s Architecture

Explanation of the Dart programming language:

Flutter uses Dart, a modern, object-oriented language that is easy to learn. Dart's syntax is similar to JavaScript, making it familiar to many developers. Dart also supports just-in-time compilation for fast development cycles and ahead-of-time compilation for optimized production deployments.

Overview of Widgets and how they form the core of Flutter applications:

Flutter apps are built using a hierarchical structure of widgets — everything in a Flutter app is a widget, from a simple text box to complex layouts. Widgets describe what their view should look like given their current configuration and state.

Your First Flutter App

Tutorial on building a simple "Hello World" application:

  1. Create a new Flutter project:
    • Open your terminal or command prompt and run flutter create hello_world.
    • Navigate into the hello_world directory.
  2. Open main.dart:
    • Open the main.dart file located in the lib folder. This file holds the main entry point of the Flutter app.
  3. Update main.dart:
    • Replace the existing code with the following to create a simple "Hello World" app:
    • Import 'package:flutter/material.dart';


void main() {

  runApp(

    MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          title: Text('Hello World'),

        ),

        body: Center(

          child: Text('Welcome to Flutter!'),

        ),

      ),

    ),

  );

}

4.Run your app:

    • Connect your device or start your emulator.
    • Run flutter run in the terminal. This command builds and runs the Flutter app.

Exploring Flutter Widgets

Detailed look at common widgets like Scaffold, AppBar, ListView, and more:

  • Scaffold: Provides a high-level structure that manages the layout of an application. It offers a framework for material design layouts with default bars, floating action buttons, and body structures.
  • AppBar: Displays a horizontal bar typically shown at the top of an app using the appBar property of the Scaffold widget.
  • ListView: A scrollable list of widgets arranged linearly.

Conclusion

Flutter is a versatile and powerful toolkit that makes it easier to build cross-platform applications with a single codebase. As you become more familiar with its components and architecture, you'll be able to explore more complex aspects of Flutter development.

Resources for further learning:

Dive into these resources, practice consistently, and soon you'll be building more complex and responsive apps using Flutter.

I hope this article has been helpful to you. If you would like to learn more about the latest UX/UI app development skills, please feel free to contact us for further information.


8會員
270內容數
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
迎新活動「方格新手村」:新格友註冊加入方格子,知名日料吃到飽餐券送給你! 👉 還不是 vocus 的會員嗎?點此註冊,參與新手村活動 👈 近期站上也出現了不少新格友,為了歡迎各位的加入,「方格新手村」隨之登場! 即日起,只要是新註冊帳號於活動期間內發佈 3 則文章,就有機會抽獎獲得知名日料吃到飽餐券。原格友也可以一起同樂,我們準備了小任
Thumbnail
2024-06-21
89
閱讀心得:展現自我的生活態度|成熟大人的說話課我們每天都在說話,但說出的話合適嗎? Sunny最近讀完一本有關溝通的書籍。 這是由世紀奧美公關的創辦人「丁菱娟」所寫的書,書的全名《丁菱娟的成熟大人說話課:如何說,才能得體又不傷人?反擊時,如何堅定又有力量?任何情境都可用的38個溝通之道》。 會找這本書來看,主要是因為Sunny 近期發
Thumbnail
2024-07-10
69
防曬產品係數測試報告彙整(2024年)從2014年起,自己對於市售防曬產品的效能產生了濃厚的興趣。因為當時候發現不少產品的防曬係數其實標示是有問題的,像是原本應該是人體測試的SPF與PA數值,實際上沒有做,只用機器測試的數據來充當,但這兩者卻有很大的差異。像是防曬係數其實有強度、廣度與平均度三個面向需要一起判斷,但多數廠商並沒有完整標示
Thumbnail
2023-04-27
39
[Flutter]JSON解析解析成List List items=json.decode(jsonStr); print(items[0]["your_key"]); 解析成Map Map<String, dynamic> user = json.decode(json); print('${user['your_k
Thumbnail
2023-12-28
2
[Flutter]HttpClient配置 idleTimeout:在httpClient請求結束後,會繼續保持連線,直到超過idleTimeout值才會關閉連接。 connectionTimeout:和伺服器建立連線逾時,如果超過connectionTimeout值則會拋出SocketException異常。 maxConnec
Thumbnail
2023-12-25
2
[Flutter]NotificationNotification是Flutter中一個重要的機制,在widget樹中,每個節點都可以分發通知,通知會沿著目前節點向上傳遞,所有父節點都可以透過NotificationListener來監聽通知。 Flutter中將此由子向父的傳遞通知的機制稱為通知冒泡(Notification Bubbli
Thumbnail
2023-12-25
3
Flutter筆記 - 螢幕顯示方向 Screen View Orientation今天來寫點FLutter的筆記吧 如果我們想要在APP中限制使用者的畫面顯示方向,不支持使用者橫放造成畫面佈局異常,或是想要在全螢幕顯示強制變橫向顯示,該怎麼做呢?
發佈在
Amos的沙龍
2023-12-21
3
[Flutter]手勢識別GestureDetector onTap、onDoubleTap和onLongPress class _GestureTestState extends State<GestureTest> { String _operation = "No detected!"; //事件名稱 @o
Thumbnail
2023-12-19
3
[Flutter]影音播放器新增video_player 在pubspec.yaml中加入video_player。 設置權限 Android 在AndroidManifest.xml檔案中的<application>裡,加入下列代碼。 <uses-permission android:name="androi
Thumbnail
2023-12-19
0
[Flutter]SharedPreferences首先需要在pubspec.yaml文件中添加依賴。 宣告 SharedPreferences record = await SharedPreferences.getInstance(); 寫入 //字串資料 await record.setString(key, value); //
Thumbnail
2023-12-19
1
[Flutter]套件管理這篇使用pubspec.yaml來管理第三方依賴套件。YAML是一種直覺、可讀性高的文件格式;他和xml或Json相比語法簡單且容易解析,所以常用於配置文件。 Flutter預設的設定檔是pubspec.yaml,底下是關鍵字解釋: name:應用程式或套件名稱。 description: 應用
Thumbnail
2023-12-18
2
[Flutter]Image方法 asset:載入此APP指定資料夾內的資源圖片。 Image.asset('assets/images/logo.png') file:載入手機指定路徑位置圖片。 Image.file('your_image_path') network:載入網路指定網址圖片。 Image
Thumbnail
2023-12-12
2
Flutter for a very beginnerIntroduction Flutter is a powerful framework for developing the app for different platforms without redevelopment. main.dart route routing map
Thumbnail
2022-08-30
1
迎新活動「方格新手村」:新格友註冊加入方格子,知名日料吃到飽餐券送給你! 👉 還不是 vocus 的會員嗎?點此註冊,參與新手村活動 👈 近期站上也出現了不少新格友,為了歡迎各位的加入,「方格新手村」隨之登場! 即日起,只要是新註冊帳號於活動期間內發佈 3 則文章,就有機會抽獎獲得知名日料吃到飽餐券。原格友也可以一起同樂,我們準備了小任
Thumbnail
2024-06-21
89
閱讀心得:展現自我的生活態度|成熟大人的說話課我們每天都在說話,但說出的話合適嗎? Sunny最近讀完一本有關溝通的書籍。 這是由世紀奧美公關的創辦人「丁菱娟」所寫的書,書的全名《丁菱娟的成熟大人說話課:如何說,才能得體又不傷人?反擊時,如何堅定又有力量?任何情境都可用的38個溝通之道》。 會找這本書來看,主要是因為Sunny 近期發
Thumbnail
2024-07-10
69
防曬產品係數測試報告彙整(2024年)從2014年起,自己對於市售防曬產品的效能產生了濃厚的興趣。因為當時候發現不少產品的防曬係數其實標示是有問題的,像是原本應該是人體測試的SPF與PA數值,實際上沒有做,只用機器測試的數據來充當,但這兩者卻有很大的差異。像是防曬係數其實有強度、廣度與平均度三個面向需要一起判斷,但多數廠商並沒有完整標示
Thumbnail
2023-04-27
39
[Flutter]JSON解析解析成List List items=json.decode(jsonStr); print(items[0]["your_key"]); 解析成Map Map<String, dynamic> user = json.decode(json); print('${user['your_k
Thumbnail
2023-12-28
2
[Flutter]HttpClient配置 idleTimeout:在httpClient請求結束後,會繼續保持連線,直到超過idleTimeout值才會關閉連接。 connectionTimeout:和伺服器建立連線逾時,如果超過connectionTimeout值則會拋出SocketException異常。 maxConnec
Thumbnail
2023-12-25
2
[Flutter]NotificationNotification是Flutter中一個重要的機制,在widget樹中,每個節點都可以分發通知,通知會沿著目前節點向上傳遞,所有父節點都可以透過NotificationListener來監聽通知。 Flutter中將此由子向父的傳遞通知的機制稱為通知冒泡(Notification Bubbli
Thumbnail
2023-12-25
3
Flutter筆記 - 螢幕顯示方向 Screen View Orientation今天來寫點FLutter的筆記吧 如果我們想要在APP中限制使用者的畫面顯示方向,不支持使用者橫放造成畫面佈局異常,或是想要在全螢幕顯示強制變橫向顯示,該怎麼做呢?
發佈在
Amos的沙龍
2023-12-21
3
[Flutter]手勢識別GestureDetector onTap、onDoubleTap和onLongPress class _GestureTestState extends State<GestureTest> { String _operation = "No detected!"; //事件名稱 @o
Thumbnail
2023-12-19
3
[Flutter]影音播放器新增video_player 在pubspec.yaml中加入video_player。 設置權限 Android 在AndroidManifest.xml檔案中的<application>裡,加入下列代碼。 <uses-permission android:name="androi
Thumbnail
2023-12-19
0
[Flutter]SharedPreferences首先需要在pubspec.yaml文件中添加依賴。 宣告 SharedPreferences record = await SharedPreferences.getInstance(); 寫入 //字串資料 await record.setString(key, value); //
Thumbnail
2023-12-19
1
[Flutter]套件管理這篇使用pubspec.yaml來管理第三方依賴套件。YAML是一種直覺、可讀性高的文件格式;他和xml或Json相比語法簡單且容易解析,所以常用於配置文件。 Flutter預設的設定檔是pubspec.yaml,底下是關鍵字解釋: name:應用程式或套件名稱。 description: 應用
Thumbnail
2023-12-18
2
[Flutter]Image方法 asset:載入此APP指定資料夾內的資源圖片。 Image.asset('assets/images/logo.png') file:載入手機指定路徑位置圖片。 Image.file('your_image_path') network:載入網路指定網址圖片。 Image
Thumbnail
2023-12-12
2
Flutter for a very beginnerIntroduction Flutter is a powerful framework for developing the app for different platforms without redevelopment. main.dart route routing map
Thumbnail
2022-08-30
1