Sử dụng ListTile để hiện danh sách ngắn gọn trong Flutter

Ý tưởng thực hành của bài này là khi người dùng nhập vào một số giá trị ở TextField, Tap vào nút lệnh thì các thông tin trên TextField sẽ được thêm vào danh sách bên dưới. Người dùng có thể Tap vào một dòng trong danh sách để hiện thông tin của dòng đó lên ở một cửa sổ thông báo.

(thực ra sau này sẽ chuyển sang 1 màn hình khác)

Người dùng cũng có thể xóa toàn bộ danh sách đi (làm mới lại danh sách), bằng cách bấm vào một nút lệnh khác.

Màn hình giao diện cơ bản như sau:

Code như sau:

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'transaction.dart';

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

class _MyAppState extends State<MyApp> {
  final GlobalKey<ScaffoldState> _scaffoldkey = GlobalKey<ScaffoldState>();
  final _costeditingcontroler = new TextEditingController();
  final _amounteditingcontroler = new TextEditingController();

  Transaction _transaction =  new Transaction(cost: '', amount: 0.0);
  List<Transaction> _transactions =  List<Transaction>();
  @override
  void initState() {
    // TODO: implement initState
    _transactions.clear();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(

      title: "Test",
      home: Scaffold(
        key: _scaffoldkey,
        appBar: AppBar(
         title: Text("Cost Managerment")),
        body: SafeArea(
          minimum: EdgeInsets.all(10),
          child: Container(
          padding: EdgeInsets.symmetric(horizontal: 10),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Padding(padding: EdgeInsets.symmetric(vertical: 10),
                child: Text("Enter your cost today?",
                  style: TextStyle(
                      fontSize: 20,fontWeight: FontWeight.bold),
                  textAlign: TextAlign.left,),),
              TextField(
                controller: _costeditingcontroler,
                decoration: InputDecoration(
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10),),
                  labelText: "What is your cost?",
                  icon: Icon(Icons.edit)
                    

                ),
              ),
            Padding(padding: EdgeInsets.symmetric(vertical: 10),
                child: TextField(
                  controller: _amounteditingcontroler,
                  decoration: InputDecoration(
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10),),
                      labelText: "Amount of money?",
                      icon: Icon(Icons.money)

                  ),
                )),
            Column(crossAxisAlignment: CrossAxisAlignment.end,
              children: [Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  FlatButton(onPressed: (){
                    setState(() {
                      _transaction = Transaction(cost: '', amount: 0.0);
                      _transaction.cost=_costeditingcontroler.text;
                      _transaction.amount= double.tryParse(_amounteditingcontroler.text) ?? 0;
                      _transactions.add(_transaction);
                      _amounteditingcontroler.text='';
                      _costeditingcontroler.text='';

                      _transactions.forEach((_transaction) =>
                          print('Noi dung: ${_transaction.cost} gia '
                              '${_transaction.amount}'));

                    });
                  },
                    child: Text("Add Cost"),
                    color: Colors.green,
                    textColor: Colors.white,),
                  Padding(padding: EdgeInsets.symmetric(horizontal: 10)),
                  FlatButton(onPressed: (){
                    setState(() {
                      _transactions.clear();
                    });

                  },
                      child: Text('Clear List'),
                    color: Colors.green,
                    textColor: Colors.white,)

                ],),
                ],
              ),

              Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children:  _transactions.map((eachTran) {
                    return ListTile(
                      leading: Icon(Icons.edit),
                      title: Text(eachTran.cost),
                      subtitle: Text('Amount: ${eachTran.amount}'),
                      onTap: (){
                        _scaffoldkey.currentState.showSnackBar(
                            SnackBar(
                              content: Text('You are tapping : ' + eachTran.cost),
                              duration: Duration(seconds: 1),
                            ));
                    },
                    );
                  }).toList()

              ),

            ],),
        ),)

      ),
    );
  }
}