Flutter - Nó dễ dàng để bắt đầu

Vì Javascript phát triển rất tốt, chúng tôi đã gặp các khung ứng dụng di động lai như Ionic bằng Angular. Sau đó React Native và NativeScript đã lên sân khấu, cho phép bạn tạo các ứng dụng di động gốc mà không cần kiến ​​thức về Java hoặc Swift.

Ionic là phát minh thần thánh ngay từ đầu nhưng React Native đã tiếp quản nó nhanh chóng. Sau đó, Telerik đã giới thiệu NativeScript nhưng theo tôi thì nó đã tạo ra một tác động lớn.

Chúng ta có thể xây dựng các ứng dụng di động mà không có các tùy chọn này không? Chết tiệt Bài viết này sẽ dẫn bạn xây dựng ứng dụng Flutter đầu tiên của bạn (nếu bạn chưa có ).

Flutter là dự án alpha mới của Google, cho phép bạn xây dựng các ứng dụng gốc. Bởi vì Flutter là một dự án alpha, nó không được đề xuất cho phát triển sản xuất. (Nhưng ai quan tâm? ¯ \ _ (ツ) _ /)

Mục tiêu: Ứng dụng danh sách mua sắm với Flutter & Firebase.

Những gì bạn cần cài đặt

Flutter: Cài đặt flutter từ liên kết này. Đừng quên làm theo các bước cài đặt, cũng cài đặt các plugin. Họ có thể bị đau ở mông nếu bạn bỏ qua

Xcode: Nếu bạn trong một máy Mac, bạn sẽ cần Xcode, bạn có thể lấy từ cửa hàng ứng dụng ở đây. Bạn cũng cần Xcode để phát triển iOS bên ứng dụng Flutter của mình.

Android Studio: Bạn chắc chắn cần điều này để phát triển phía Android của ứng dụng Flutter. Lấy nó từ đây.

IDE: Tôi đã sử dụng VSCode làm trình soạn thảo văn bản chính của mình và có các plugin Flutter & Dart cho nó nhưng tôi rất khuyến khích Intellij IDEA để phát triển Flutter. Nó có các công cụ hoàn chỉnh để phát triển ứng dụng Flutter. Vì vậy, có được nó từ đây.

Bắt ứng dụng mẫu chạy

Khởi động IDE và nhấp vào Tạo dự án mới, sau đó chọn Flutter từ bên trái.

Như tôi đã nói trước đây, nếu bạn bỏ qua các bước cài đặt, bạn có thể không thấy tùy chọn Flutter. Vậy quay lại

Đối với những người đã đưa ra lời khuyên của tôi, hãy để cuốn vào!

Điền vào phần còn lại của công cụ như bạn muốn.

Tùy chọn Java là mặc định cho ngôn ngữ Android, nhưng tôi đã chuyển ngôn ngữ iOS sang Swift vì tôi không biết gì về Objective-C nên nó quyết định đưa ra quyết định của bạn.

Bây giờ bạn đã sẵn sàng với ứng dụng bộ xương. Vui lòng xóa tất cả các dòng nhận xét vì tôi không thấy chúng hữu ích. Đồng thời xóa floatActionButton, nội dung cơ thể và phương thức _incrementCorer.

Bây giờ bạn đã có một giàn giáo sạch

Hãy cùng nhau tạo giao diện

Tạo một chuỗi cuối cùng mới trong lớp và thay thế tiêu đề của Ứng dụng Vật liệu và tiêu đề tiện ích nhà. Tôi cũng đã thay đổi ứng dụng swatch màu swatch thành màu đỏ. Tôi thích nó !
Bây giờ bạn có vẻ đẹp này và chạy

Trong _MyHomePageState, tạo một TextEditingContoder cuối cùng, đây là một bộ điều khiển cho trường văn bản có thể chỉnh sửa.

TextEditingContoder cuối cùng _textControll = new TextEditingControll ();

sau đó tạo phương thức _handleSubmit để thực hiện những điều tuyệt vời với đầu vào của người dùng

void _handleSubmit (Chuỗi văn bản) {
    
}

và cuối cùng, thêm mã này để tạo thùng chứa đầu vào ở phía dưới.

Tiện ích _createInputContainer () {
        trả lại container mới (
          lề: const EdgeInsets.symmetric (ngang: 16.0),
          con: hàng mới (
            trẻ em:  [
              linh hoạt mới (
                con: TextField mới (
                    bộ điều khiển: _textContoder,
                    onSubmit: _handleSubmit,
                    trang trí: InputDecoration.collapsed mới (
                        gợi ý: "Thêm một cái gì đó"),
                ),
            ),
            Container mới (
                con: IconButton mới (
                    màu: Colors.red,
                    biểu tượng: Biểu tượng mới (Biểu tượng.list),
                    onPress: () {}),
            ),
            Container mới (
                con: IconButton mới (
                    màu: Colors.red,
                    biểu tượng: Biểu tượng mới (Biểu tượng.send),
                    onPress: () {}),
            ),
        ],
    ),
);
}

Chúng tôi đang làm tốt cho đến nay !! Chúng tôi đã tạo một thùng chứa cho phần tử đầu vào, nút danh sách và gửi nút kinda. Các chức năng onPress hiện đang trống, chúng tôi sẽ làm việc với nó sau.

Bây giờ hãy để Lừa quay trở lại cơ thể của Giàn giáo của chúng tôi. Chỉnh sửa mã cơ thể như sau:

thân: Cột mới (
  trẻ em:  [
      linh hoạt mới (
          con: ListView.builder mới (
              phần đệm: EdgeInsets.all mới (8.0),
              ngược lại: sai,
              itemBuilder: (_, int index) => null,
              mục đếm: 1,
          ),
      ),
      Dải phân cách mới (chiều cao: 1.0),
      Container mới (
          trang trí: BoxDecoration mới (
              màu: Theme.of (bối cảnh) .cardColor),
          con: _createInputContainer (),
      ),
  ],
)

Được rồi, bây giờ cơ thể gần như đã sẵn sàng. Chúng tôi có một danh sách, một bộ chia giữa các mục danh sách và các yếu tố đầu vào của chúng tôi. Như bạn có thể thấy tôi đã sử dụng widget _createInputContainer () làm con của một container. Nó là một cách hay để giữ cho mã của bạn sạch sẽ và có tổ chức.

Tôi tin rằng tất cả các bạn đều tốt cho đến thời điểm này

Thành thật mà nói đây là hướng dẫn đầu tiên của tôi từ trước đến giờ nên tôi rất phấn khích. Tôi không chắc cách dạy kèm của tôi có dễ hiểu không nhưng tôi tin đó là

Hãy nói chuyện về những việc cần làm

  1. Tạo bên trong phương thức _handleSubmit.
  2. Thêm văn bản gửi dưới dạng mục danh sách mới và hiển thị chúng.
  3. Làm cho danh sách của chúng tôi danh sách tương tác thân thiện với người dùng.
  4. Thêm cơ sở dữ liệu Firebase vào dự án.

Hãy để cuốn vào!

Nếu chúng ta nghĩ về một ứng dụng thông thường xử lý đầu vào của người dùng, điều đầu tiên xuất hiện trong đầu là xóa đầu vào sau khi gửi

void _handleSubmit (String newItem) {
    _textControll.clear ();
}

và sửa đổi nút gửi như

Container mới (
    con: IconButton mới (
        màu: Colors.red,
        biểu tượng: Biểu tượng mới (Biểu tượng.send),
        onPress: () {
            _handleSubmit (_textControll.text) // sửa đổi điều này
        }),
),

bây giờ người dùng có thể gửi đầu vào và ứng dụng có thể xử lý đầu vào, về cơ bản sẽ xóa vùng nhập sau khi gửi.

Bây giờ chúng tôi sẽ tạo một Widget hiển thị danh sách các mục. Đầu tiên chúng ta phải tạo một widget đại diện cho một mục duy nhất. Hãy để cùng nhau tạo ra một StatlessWidget và đặt tên là ListItem và đặt nó bên ngoài _MyHomePageState.

lớp ListItem mở rộng StatlessWidget {
    ListItem ({this.itemName});
    chuỗi tên cuối cùng;
    @ghi đè
    Xây dựng widget (bối cảnh BuildContext) {
    trả lại container mới (
        lề: const EdgeInsets.symmetric (dọc: 10.0),
        
    );
}
}

Trong một Container mới, chúng tôi đặt lề dọc đối xứng với giá trị 10.0 vì nếu không, các mục trong danh sách sẽ trông quá gần nhau. Chúng tôi muốn một số shit mát mẻ hả? Don vá lo lắng chúng tôi sẽ thêm kiểu dáng sau.

Sau đó, là phần tử con, chúng ta sẽ thêm một tiện ích Row hiển thị các phần tử con của nó trong một mảng ngang.

con: hàng mới (
    crossAxisAlocation: CrossAxisAlocation.start, // it beautiful;)
     trẻ em:  [
         Cột mới (
             crossAxisAlocation: CrossAxisAlocation.start,
              trẻ em:  [
                  Container mới (
                      con: văn bản mới (itemName), // đây là tên mục
                   ),
              ],
          ),
     ],
),

Chà, toàn bộ mã cho tiện ích ListItem này trông như thế này:

lớp ListItem mở rộng StatlessWidget {
    ListItem ({this.itemName});
    chuỗi tên cuối cùng;
    @ghi đè
    Xây dựng widget (bối cảnh BuildContext) {
        trả lại container mới (
            lề: const EdgeInsets.symmetric (dọc: 10.0),
            con: hàng mới (
                crossAxisAlocation: CrossAxisAlocation.start,
                trẻ em:  [
                    linh hoạt mới (
                        Cột mới (
                        crossAxisAlocation: CrossAxisAlocation.start,
                        trẻ em:  [
                            Container mới (
                                con: Văn bản mới (itemName),
                            ),
                    ),
                        ],
                    ),
                ],
            ),
        );
    }
}

Được rồi, bây giờ hãy để Lôi quay trở lại _MyHomePageState, thêm dòng này

Danh sách cuối cùng  _shopItems =  [];

Bây giờ chúng tôi sẽ giữ các mục danh sách mua sắm trong một tiện ích Danh sách. Tôi biết sau khi thoát khỏi ứng dụng, danh sách này sẽ trống một lần nữa, đó là lý do tại sao chúng tôi có Firebase trong danh sách việc cần làm

Phương pháp _handleSubmit đáng yêu của chúng tôi đang chờ đợi chúng tôi. Nó cần một số chú ý tại thời điểm này.

void _handleSubmit (String newItem) {
    _textControll.clear ();
    if (newItem.trim (). length> 0) {
        ListItem listItem = new ListItem (
            itemName: newItem, // Khởi tạo tiện ích ListItem của chúng tôi và gán đầu vào của người dùng làm giá trị cá thể.
        );
        setState (() {
            _shopItems.insert (0, listItem);
        });
        // Thông báo khung rằng trạng thái bên trong của đối tượng này đã thay đổi.
    }
}

Và là bước cuối cùng của phần này, hãy truy cập ListView trong phần thân của tiện ích chính của chúng tôi

con: ListView.builder mới (
    phần đệm: EdgeInsets.all mới (8.0),
    ngược lại: sai,
    itemBuilder: (_, int index) => _shopItems [index], // sửa đổi điều này
    itemCount: _shopItems.length, // sửa đổi điều này
),

Trước khi sửa đổi, chúng ta có phần thân hàm itemBuilder là null. Chúng tôi đã sửa đổi nó để xây dựng mục danh sách theo chỉ mục đã cho của _shopItems và chúng tôi đã thay đổi itemCount thành chiều dài của _shopItems.

Hãy để thử bản này trực tiếp:

Tôi chỉ nhận ra rằng tôi chỉ sử dụng iPhone X để kiểm tra ứng dụng. Dưới đây là ảnh chụp nhanh Google Pixel 2 XL từ ứng dụng. Trông thật ngầu

Tôi đoán mọi thứ đang hoạt động rất tốt trừ khi tôi thêm một mục mới, mục mới sẽ được thêm vào đầu. Tôi sẽ tìm ra nó trong khi làm việc với những thứ khác

Tôi muốn tạm dừng bài viết này ở đây, vì tôi không muốn người đọc cảm thấy nhàm chán bằng cách làm mọi thứ trong một hướng dẫn. Tôi tin rằng chúng tôi đã làm một số thứ tốt đẹp cho đến đây

Trong bài viết tiếp theo, chúng tôi sẽ triển khai ngày / giờ, xóa mục, thiết lập mục đã hoàn thành, cơ sở dữ liệu Firebase và danh sách mua sắm được chỉ định như nội dung phòng tắm hoặc dụng cụ nhà bếp. Nó sẽ rất vui và bạn có lời của tôi cho điều này

Như tôi đã đề cập trước đây, đây là hướng dẫn đầu tiên của tôi từ trước đến giờ, xin vui lòng cho tôi biết đánh giá và đề xuất của bạn về nó. Tôi rất thích nghe những mặt mạnh hay yếu của tôi khi viết một bài hướng dẫn và chắc chắn tôi sẽ cải thiện bản thân mình !!

Trong khi đọc và áp dụng hướng dẫn, nếu bạn gặp bất kỳ vấn đề nào với mã của tôi hoặc mã của bạn, vui lòng liên hệ với tôi và tôi sẽ cố gắng hết sức để hỗ trợ bạn.

Instagram | E-mail