Bắt đầu với Flutter – Dogs App: Data Model & HTTP

Trong bài hướng dẫn này, chúng ta bắt đầu làm quen với Flutter data model & HTTP. Xây dựng Dogs class để lưu các thuộc tính của một loài chó. Tiếp theo là cách kết nối HTTP API để lấy hình ảnh các bé cún làm dữ liệu cho ứng dụng của chúng ta.

Chỉnh sửa file main.dart

Tất cả các ứng dụng Flutter đều bắt đầu bằng main.dart. Trước tiên, bạn cần xoá bỏ tất cả code của Counter app (ứng dụng ban đầu khi build một new flutter project). Sau đó thay thế bằng đoạn code sau:

// main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /// MaterialApp is the base Widget for your Flutter Application
    /// Gives us access to routing, context, and meta info functionality.
    return MaterialApp(
      title: 'We Rate Dogs',
      // Make all our text default to white
      // and backgrounds default to dark
      theme: ThemeData(brightness: Brightness.dark),
      home: MyHomePage(title: 'We Rate Dogs'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    @override
    Widget build(BuildContext context) {
        /// Scaffold is the base for a page.
        /// It gives an AppBar for the top,
        /// Space for the main body, bottom navigation, and more.
        return Scaffold(
            /// App bar has a ton of functionality, but for now lets
            /// just give it a color and a title.
            appBar: AppBar(
                /// Access this widgets properties with 'widget'
                title: Text(widget.title),
                backgroundColor: Colors.black87,
            ),
            /// Container is a convenience widget that lets us style it's
            /// children. It doesn't take up any space itself, so it
            /// can be used as a placeholder in your code.
            body: Container(),
        );
    }
}

Đoạn code trên cơ bản chỉ thay đổi title và backgroundColor của màn hình home. Chi tiết mình đã giải thích rõ trong code.

Đây là kết quả.

Tạo một Dog Model Class

Phần này sẽ nói về Flutter data model & HTTP. Chúng ta sẽ tạo một class Dart đơn giản có tên là Dog.

Đầu tiên, tạo một file mới có tên dog_model.darttrong thư mục lib.

- lib
  -dog_model.dart
  -main.dart

Trong file đó, chúng ta sẽ chỉ tạo một class siêu cơ bản với một vài thuộc tính:

class Dog {
  final String name;
  final String location;
  final String description;
  String imageUrl;
  // All dogs start out at 10, because they're good dogs.
  int rating = 10;
  Dog(this.name, this.location, this.description);
}

Get Dog Pics

Chúng ta sẽ sử dụng một API đơn giản để lấy hình ảnh các chú cún cho ứng dụng của chúng ta. API này không yêu cầu API key hoặc bất kỳ thứ gì.

Bạn có thể truy cập vào dog.ceo. API này sẽ cung cấp cho chúng ta một hình ảnh ngẫu nhiên của các chú cún.

Trong Dog class, bạn hãy thêm các method sau:

// dog_model.dart
Future getImageUrl() async {
  // Null check so our app isn't doing extra work.
  // If there's already an image, we don't need to get one.
  if (imageUrl != null) {
    return;
  }
  // This is how http calls are done in flutter:
  HttpClient http = HttpClient();
  try {
    // Use darts Uri builder
    var uri = Uri.http('dog.ceo', '/api/breeds/image/random');
    var request = await http.getUrl(uri);
    var response = await request.close();
    var responseBody = await response.transform(utf8.decoder).join();
    // The dog.ceo API returns a JSON object with a property
    // called 'message', which actually is the URL.
    imageUrl = json.decode(responseBody)['message'];
  } catch (exception) {
    print(exception);
  }
}

Nhớ hãy import 2 dart packages sau, nếu không bạn sẽ có thể gặp lỗi.

import 'dart:convert';
import 'dart:io';

Tạo một số dữ liệu mẫu với Dog class.

Trong main.darthãy tạo một số thông tin về các chú cún của chúng ta.

Nhớ import dog_model.dart vào nhé.

// main.dart
import 'package:flutter/material.dart';
import 'dog_model.dart';

Sau đó thêm:

// main.dart in the State class
class _MyHomePageState extends State<MyHomePage> {
  List<Dog> initialDoggos = []
    ..add(Dog('Ruby', 'Portland, OR, USA',
        'Ruby is a very good girl. Yes: Fetch, loungin\'. No: Dogs who get on furniture.'))
    ..add(Dog('Rex', 'Seattle, WA, USA', 'Best in Show 1999'))
    ..add(Dog('Rod Stewart', 'Prague, CZ',
        'Star good boy on international snooze team.'))
    ..add(Dog('Herbert', 'Dallas, TX, USA', 'A Very Good Boy'))
    ..add(Dog('Buddy', 'North Pole, Earth', 'Self proclaimed human lover.'));
}