CÔNG NGHỆ THÔNG TIN >> BÀI VIẾT CHỌN LỌC

Flutter cơ bản-Thiết kế màn hình hồ sơ cá nhân

Đăng lúc: 10:17 PM - 23/06/2024 bởi Charles Chung - 179

Trong bài viết này tôi sẽ hướng dẫn các bạn thiết kế màn hình hồ sơ cá nhân trong Flutter.

1. Yêu cầu

  • Thiết kế màn hình như hình mô tả ở trên
  • Khi kích vào nút Xem chi tiết thì showDialog hiển thị thông báo như màn hình

2. Màn hình thiết kế

Sau đây là hinh ảnh trực quan thể hiện cấu trúc màn hình với các thành phần Widge.

3. Source code tham khảo

//định nghĩa lớp MyApp kế thừa từ StatelessWidget
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Exercise01-Lab02',
      home: MyHomePage(title: 'Hồ sơ giảng viên'),
      debugShowCheckedModeBanner: false,
    );
  }
}
//định nghĩa lớp MyHomePage kế thừa từ StatelessWidget
class MyHomePage extends StatelessWidget {
  String title;
  MyHomePage({required this.title});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: SingleChildScrollView(
          child:
              Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
            const SizedBox(
              height: 20,
            ),
            Center(
              child: RichText(
                text: const TextSpan(
                    style: TextStyle(color: Colors.black,fontSize: 20),
                    children: [
                      TextSpan(text: 'Xin chào: '),
                      TextSpan(
                          text: 'Charles Chung!',
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              color: Colors.blue,
                              fontStyle: FontStyle.italic)),
                    ]),
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            const Center(
                child: CircleAvatar(
              backgroundImage: AssetImage('assets/images/charles-chung.jpg'),
              radius: 120,
            )),
            Container(
              padding: const EdgeInsets.all(20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text('Họ và tên: Lại Đức Chung'),
                  const SizedBox(
                    height: 20,
                  ),
                  const Text('Điện thoại: 0968018161'),
                  const SizedBox(
                    height: 20,
                  ),
                  const Text('Email: chungld@bachkhoa-aptech.edu.vn'),
                  const SizedBox(
                    height: 20,
                  ),
                  const Text('Chuyên ngành: Khoa học máy tính'),
                  const SizedBox(
                    height: 20,
                  ),
                  const Text('Level: 8'),
                  const SizedBox(
                    height: 20,
                  ),
                  const Text('website: https://hanam88.com'),
                  const SizedBox(
                    height: 20,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      ElevatedButton(
                          onPressed: () {
                            showMessage(context,'Thông tin chi tiết');
                          }, child: const Text('Xem chi tiết')),
                      ElevatedButton(
                        onPressed: () {
                          showMessage(context,'Chỉnh sửa hồ sơ');
                        },
                        style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.red),
                        child: const Text('Chỉnh sửa hồ sơ'),
                      ),
                    ],
                  )
                ],
              ),
            )
          ]),
        ));
  }
  //định nghĩa hàm showMessage
  void showMessage(BuildContext context, String msg)
  {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Hồ sơ giảng viên'),
          content: Text(msg),
          actions: <Widget>[
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: Text('Đóng'),
            ),
          ],
        );
      },
    );
  }
}

 

thay lời cảm ơn!

QUẢNG CÁO - TIẾP THỊ