Lập trình Flutter – Học lập trình, học sử dụng máy tính từ số 0 – ZeZo.dev https://zezo.dev Fri, 29 Nov 2024 16:38:18 +0000 vi hourly 1 https://wordpress.org/?v=6.7.1 https://zezo.dev/wp-content/uploads/2024/11/cropped-zzel-32x32.png Lập trình Flutter – Học lập trình, học sử dụng máy tính từ số 0 – ZeZo.dev https://zezo.dev 32 32 Flutter – Sao chép text vào clipboard https://zezo.dev/view/flutter-sao-chep-text-vao-clipboard Fri, 29 Nov 2024 16:38:18 +0000 https://zezo.dev/?p=203

Bước 1: Viết hàm sao chép

 // Hàm sao chép   vào clipboard
  void _copyTextToClipboard(String text, BuildContext context) {
    Clipboard.setData(ClipboardData(text: text));
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text('Info copied to clipboard'),
        duration: Duration(seconds: 2),
      ),
    );
  }

Bước 2: Tạo nút bấm hoặc IconButton để thực hiện thao tác

IconButton(
                    icon: const Icon(
                      Icons.copy_all_outlined, // Biểu tượng bạn muốn hiển thị
                      color: Colors.amber,
                    ),
                    onPressed: () {
                      // Định nghĩa hành động khi nhấp vào đây
                      _copyTextToClipboard(taskwork.content, context);
                       
                    },
                  ),
]]>
Flutter-Format TextField password https://zezo.dev/view/flutter-format-textfield-password Fri, 29 Nov 2024 16:37:20 +0000 https://zezo.dev/?p=201 Định dạng ô nhập password sao cho đẹp và tiện dụng

 

Bước 1: Khai báo state để kiểm tra trạng thái ẩn hiện password

Phần khai báo này nên khai báo ở đầu widget

  bool _isObscure = true;

Bước 2: Thiết lập cho TextField để nhận vai trò ô nhập password

Trong đó:

– suffixIcon: Hiển thị biểu tượng hình mắt ẩn hiện

– Trong code dưới có phần setState() là hàm để thay đổi trạng thái ẩn hiện Password cho ô text.

TextField(
              obscureText: _isObscure,
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password',
              suffixIcon: IconButton(
                    // Thay đổi trạng thái của obscureText khi nhấn vào nút toggle
                    onPressed: () {
                      setState(() {
                        _isObscure = !_isObscure;
                      });
                    },
                    // Hiển thị icon mắt khi mật khẩu được ẩn và icon mắt nhắm khi mật khẩu được hiển thị
                    icon: Icon(
                      _isObscure ? Icons.visibility : Icons.visibility_off,
                    ),
                  ),
              )
              
            ),

Bước 3: Định dạng màu sắc và khung viền

Phần này nếu định dạng chung cho tất cả TextField ứng dụng thì bạn đặt code dưới vào file main.dart ở trong phần themeData.

 

Nếu bạn muốn định dạng riêng cho một TextField thì viết ở bên trong thuộc tính decoration

 

inputDecorationTheme: const InputDecorationTheme(
          labelStyle: TextStyle(
              color: Colors.blue,
              fontSize: 12), // điều chỉnh màu sắc và kích thước font cho label
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(
                color: Colors.blue,
                width: 1.0), // điều chỉnh màu sắc và chiều rộng viền TextField
          ),
          focusColor: Colors.green, // màu sắc khi TextField được focus
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(
                color: Colors.blue,
                width: 1.0), // điều chỉnh màu sắc và chiều rộng viền TextField
          ),
          errorBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                      color:  Color.fromARGB(255, 247, 189, 189),
                      width: 1.0), // điều chỉnh màu sắc và chiều rộng viền TextField
                ),
                focusedErrorBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                      color: Color.fromARGB(255, 247, 189, 189),
                      width: 1.0), // điều chỉnh màu sắc và chiều rộng viền TextField
                ),
          fillColor: Color.fromARGB(0, 208, 230, 251), // màu nền của TextField
          filled: true, // cho phép điền màu cho TextField
          contentPadding: EdgeInsets.symmetric(vertical: 5, horizontal: 5), // Giảm padding trong TextField
          
        ),

 

 

 

]]>