Hướng dẫn sử dụng listview trong Flutter

Trước khi bắt đầu, mình muốn chắc chắn rằng bạn đã có cài đặt flutter. Nếu chưa cài, mình sẽ có bài hướng dẫn cài flutter trong tương lai.Giờ thì bạn có thể search cách cài đặt flutter trên google nhé.

Trong bài viết này, mình sẽ hướng dẫn các bạn:

• Sử dụng listview để hiện ra danh sách các từ tiếng anh random.
• Đổi màu cho các item trong listview
• Thêm icon check/uncheck cho item listview

Import các thư viện cần thiết

Vì chúng ta sẽ hiện random các từ tiếng anh nên mình sẽ sử dụng thư viện english_word, một thư viện phổ biến. Bạn có thể tham khảo tất cả các thư viện hiện có tại pub.dartlang.org.
Mở file “pubspec.yaml”, file này có tác dụng như build-gradle (app) của android thuần, dùng để khai báo các thư viện sẽ sử dụng. Bạn copy dòng sau vào dependency tuong tự như sau:

[]

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  english_words: ^3.1.5

*ký tự ‘^’ gợi cho chương trình biết rằng sẽ chỉ lấy thư viện version 3.1.5 trở lên.

Tiếp theo bạn, bật terminal ở dưới góc trái của IDE Android studio, nhập dòng lệnh sau:
flutter packages get

Dòng lệnh này sẽ download các thư viện bạn đã khai báo. Một bước nữa, vào “main.dart”, bạn thêm dòng lệnh import mà thư viện english word đã cho:

import ‘package:english_words/english_words.dart’;

Bắt đầu tạo listview trong flutter

Sau khi đã thêm thư viện vào project rồi, bạn mở “main.dart”, đảm bảo hàm main của bạn đang được trỏ vào đúng lớp.

[]

main() => runApp(new MyApp()); 	//One-line function Khai báo chương trình chính

class MyApp extends StatelessWidget {    
  @override
  Widget build(BuildContext context) {

    return new MaterialApp(
      title: "Title",
      home: new MyRandomWord());
  }
}

Để hàm MyApp hoạt động, bạn phải có lớp MyRandomWord như sau:

[]

class MyRandomWord extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MyRandomWordState(); //
  }
}

Class kế thừa từ StatefulWidget nên bạn cần phải tạo một lớp kế thừa từ State để khai báo cho nó:

[]

class MyRandomWordState extends State<MyRandomWord> {

  final _words = <WordPair>[]; // Danh sách các từ tiếng anh sẽ được tạo tự động
  final _checkedWord = new Set<WordPair>(); //Danh sách lưu các từ được nhấn để hiện check hay uncheck 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("List item"),
      ),
      body: new ListView.builder(itemBuilder: (context,index) { //context là con trỏ hiện tại, index là item hiện tại đang xem
        if(index>=_words.length){  //Đặt điều kiện, khi lưới xuống cuối cùng của list view thì sẽ tạo thêm 10 từ random nữa
          _words.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_words[index],index);
      }) ,
    );
  }
Widget _buildRow(WordPair wordPair,int index) {
    final color = index%2 ==0 ?Colors.red:Colors.blue; //Làm xen kẽ màu cho đẹp
    final isChecked = _checkedWord.contains(wordPair);  
    return new ListTile(
      leading: new Icon(isChecked?Icons.check_box:Icons.check_box_outline_blank,
      color: color,),
      title: new Text(
        wordPair.asUpperCase,
        style: new TextStyle(fontSize: 18.0,color: color),
      ),
    onTap: (){
        setState(() {
          if(isChecked){
            _checkedWord.remove(wordPair);
          }else
            _checkedWord.add(wordPair);
        });
    },
    );
  }
}

Bạn nên nhớ, để một ListView.builder được tạo đúng thì bạn phải trả về hàm ListTile, ListTile này sẽ tạo từng dòng cho ListView, nó có chức năng tương tự như listviewitem vậy. Đa số chức năng mình đã comment trong code nên mình sẽ không nhắc lại.
Đến đây, bạn có thể đọc lại một lần nữa hoặc triển khai code để chạy thử, nhờ đó bạn có thể biết được từng thành phần trong ListView sẽ hoạt động như thế nào.
Nếu làm đúng theo những bước trên, bạn sẽ nhận được kết quả như sau.

Một lần nữa, cảm ơn bạn đã theo dõi blog của mình. Hi vọng sẽ gặp bạn trong bài viết tiếp theo, “Chuyển màn hình với navigator và route”. Xin gửi lời cảm ơn chân thành đến thầy Nguyễn Đức Hoàng với những kiến thức rất ngắn gọn và hữu ích.