Tạo ứng dụng đơn giản trong Android Studio

Trong chương này, chúng ta hãy tạo một Chớp cánh ứng dụng để hiểu kiến ​​thức cơ bản về cách tạo ứng dụng rung trong Android Studio.

Bước 1 – Mở Android Studio

Bước 2 – Tạo dự án Flutter. Đối với điều này, hãy nhấp vào Tệp → Mới → Dự án Flutter mới

Bước 3 – Chọn Ứng dụng Flutter. Đối với điều này, hãy chọn Ứng dụng Flutter và bấm vào Tiếp theo.

Bước 4 – Cấu hình ứng dụng như bên dưới và nhấp vào Tiếp theo.

• Tên dự án: hello_app

• Đường dẫn SDK Flutter:

• Địa điểm dự án:

• Sự mô tả: Ứng dụng hello world dựa trên Flutter

Bước 5 – Cấu hình dự án.

Đặt miền công ty là flutterapp.Flutter và nhấp vào Kết thúc.

Bước 6 – Nhập tên miền Công ty.

Android Studio tạo ra một ứng dụng rung hoàn toàn hoạt động với chức năng tối thiểu. Hãy để chúng tôi kiểm tra cấu trúc của ứng dụng và sau đó, thay đổi mã để thực hiện nhiệm vụ của chúng tôi.

Cấu trúc của ứng dụng và mục đích của nó như sau:

Các thành phần khác nhau của cấu trúc của ứng dụng được giải thích ở đây –

• android – Mã nguồn được tạo tự động để tạo ứng dụng Android

• ios – Mã nguồn được tạo tự động để tạo ứng dụng ios

• lib – Thư mục chính chứa mã Dart được viết bằng khung làm việc

• ib / main.dart – Điểm vào của ứng dụng Flutter

• kiểm tra – Thư mục chứa mã Dart để kiểm tra ứng dụng rung

• test / widget_test.dart – Mã mẫu

• .gitignore – Tệp điều khiển phiên bản Git

• .metadata – tự động tạo ra bởi các công cụ rung

• .packages – tự động tạo ra để theo dõi các gói rung

• .iml – tệp dự án được Android studio sử dụng

• pubspec.yaml – Được sử dụng bởi Quán rượuTrình quản lý gói Flutter

• pubspec.lock – Được tạo tự động bởi trình quản lý gói Flutter, Quán rượu

• README.md – Tệp mô tả dự án được viết ở định dạng Markdown

Bước 7 – Thay thế mã phi tiêu trong tệp lib / main.dart với mã dưới đây –

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
      return MaterialApp(
         title: 'Hello World Demo Application',
         theme: ThemeData(
            primarySwatch: Colors.blue,
         ),
         home: MyHomePage(title: 'Home page'),
      );
   }
}
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);
   final String title;

   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(
            title: Text(this.title),
         ),
         body: Center(
            child:
            Text(
               'Hello World',
            )
         ),
      );
   }
}

Hãy để chúng tôi hiểu từng dòng mã phi tiêu.

• Dòng 1 – nhập khẩu gói rung, vật chất. Vật liệu là một gói rung để tạo giao diện người dùng theo nguyên tắc thiết kế Vật liệu do Android chỉ định.

• Dòng 3 – Đây là điểm vào của ứng dụng Flutter. Cuộc gọi runApp chức năng và chuyển nó một đối tượng của Ứng dụng của tôi lớp. Mục đích của runApp chức năng là để đính kèm widget đã cho vào màn hình.

• Dòng 5-17 – Widget được sử dụng để tạo giao diện người dùng trong khung làm việc. StatelessWidget là một widget, không duy trì bất kỳ trạng thái nào của widget. Ứng dụng của tôi kéo dài StatelessWidget và ghi đè nó xây dựng phương pháp. Mục đích của xây dựng là tạo một phần giao diện người dùng của ứng dụng. Nơi đây, xây dựng sử dụng phương pháp MaterialApp, một tiện ích để tạo giao diện người dùng cấp gốc của ứng dụng. Nó có ba thuộc tính – tiêu đề, chủ đề và Trang Chủ.

  • Tiêu đề là tiêu đề của ứng dụng

  • chủ đề là chủ đề của widget. Ở đây, chúng tôi đặt màu xanh da trời như màu tổng thể của ứng dụng bằng cách sử dụng ThemeData lớp và tài sản của nó, primarySwatch.

  • home là giao diện người dùng bên trong của ứng dụng, mà chúng tôi đặt một tiện ích con khác, MyHomePage

• Dòng 19 – 38 – MyHomePage giống như Ứng dụng của tôi ngoại trừ nó trở lại Khung Tiện ích con. Khung là một tiện ích con cấp cao nhất bên cạnh MaterialApp widget được sử dụng để tạo thiết kế material design tuân theo giao diện người dùng. Nó có hai thuộc tính quan trọng, appBar để hiển thị tiêu đề của ứng dụng và nội dung để hiển thị nội dung thực của ứng dụng. AppBar là một tiện ích khác để hiển thị tiêu đề của ứng dụng và chúng tôi đã sử dụng nó trong appBar tài sản. Trong thân hình tài sản, chúng tôi đã sử dụng Trung tâm widget, trung tâm của nó là widget con. Chữ là widget cuối cùng và bên trong nhất để hiển thị văn bản và nó được hiển thị ở giữa màn hình.

Bước 8 – Bây giờ, chạy ứng dụng bằng cách sử dụng, Chạy → Chạy main.dart

Bước 9 – Cuối cùng, kết quả của ứng dụng như sau: