Skip to main content

7 posts tagged with "Widget"

View All Tags

Flutter: Button, TextField và Form widgets

· 4 min read

Button, TextField và Form là những widget quan trọng để tạo giao diện tương tác trong ứng dụng Flutter. Bài viết này sẽ hướng dẫn bạn cách sử dụng chúng một cách hiệu quả.

1. Button Widgets​

Flutter cung cấp nhiều loại button khác nhau để phù hợp với các nhu cầu khác nhau.

Button Widget Examples

1.1. ElevatedButton​

ElevatedButton(
  onPressed: () {
    // Xử lý sự kiện khi button được nhấn
  },
  child: const Text('Elevated Button'),
  style: ElevatedButton.styleFrom(
    padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
    backgroundColor: Colors.blue,
    foregroundColor: Colors.white,
  ),
)

1.2. TextButton​

TextButton(
  onPressed: () {
    // Xử lý sự kiện khi button được nhấn
  },
  child: const Text('Text Button'),
  style: TextButton.styleFrom(
    foregroundColor: Colors.blue,
  ),
)

1.3. IconButton​

IconButton(
  onPressed: () {
    // Xử lý sự kiện khi button được nhấn
  },
  icon: const Icon(Icons.favorite),
  color: Colors.red,
)

1.4. OutlinedButton​

OutlinedButton(
  onPressed: () {
    // Xử lý sự kiện khi button được nhấn
  },
  child: const Text('Outlined Button'),
  style: OutlinedButton.styleFrom(
    side: const BorderSide(color: Colors.blue),
  ),
)

2. TextField Widget​

TextField widget được sử dụng để nhận input từ người dùng.

TextField Widget Examples

2.1. Basic TextField​

TextField(
  decoration: InputDecoration(
    labelText: 'Username',
    hintText: 'Enter your username',
    prefixIcon: const Icon(Icons.person),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
)

2.2. Password TextField​

TextField(
  obscureText: true,
  decoration: InputDecoration(
    labelText: 'Password',
    hintText: 'Enter your password',
    prefixIcon: const Icon(Icons.lock),
    suffixIcon: IconButton(
      icon: const Icon(Icons.visibility),
      onPressed: () {
        // Toggle password visibility
      },
    ),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
)

2.3. Number TextField​

TextField(
  keyboardType: TextInputType.number,
  decoration: InputDecoration(
    labelText: 'Age',
    hintText: 'Enter your age',
    prefixIcon: const Icon(Icons.numbers),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
)

3. Form Widget​

Form widget được sử dụng để quản lý và validate nhiều TextField cùng lúc.

Form Widget Examples

3.1. Basic Form​

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        decoration: const InputDecoration(
          labelText: 'Email',
          hintText: 'Enter your email',
        ),
        validator: (value) {
          if (value == null || value.isEmpty) {
            return 'Please enter your email';
          }
          return null;
        },
      ),
      TextFormField(
        decoration: const InputDecoration(
          labelText: 'Password',
          hintText: 'Enter your password',
        ),
        obscureText: true,
        validator: (value) {
          if (value == null || value.isEmpty) {
            return 'Please enter your password';
          }
          return null;
        },
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // Process form data
          }
        },
        child: const Text('Submit'),
      ),
    ],
  ),
)

3.2. Form với Custom Validation​

TextFormField(
  decoration: const InputDecoration(
    labelText: 'Phone Number',
    hintText: 'Enter your phone number',
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter your phone number';
    }
    if (!RegExp(r'^\d{10}$').hasMatch(value)) {
      return 'Please enter a valid 10-digit phone number';
    }
    return null;
  },
)

4. Best Practices​

4.1. Button​

  • Sử dụng đúng loại button cho từng trường hợp
  • Thêm loading state cho button khi cần
  • Xử lý disable state khi cần thiết
  • Sử dụng const constructor khi có thể

4.2. TextField​

  • Luôn có label hoặc hint text
  • Sử dụng prefix/suffix icon khi cần
  • Xử lý keyboard type phù hợp
  • Validate input khi cần thiết

4.3. Form​

  • Sử dụng Form widget để quản lý nhiều field
  • Implement validation logic rõ ràng
  • Hiển thị error message rõ ràng
  • Xử lý form submission một cách an toàn

Kết luận​

Button, TextField và Form là những widget cơ bản nhưng rất quan trọng trong Flutter. Việc hiểu rõ cách sử dụng chúng sẽ giúp bạn tạo ra giao diện người dùng tương tác hiệu quả.

Tài liệu tham khảo:

Flutter: Truyền dữ liệu giữa các widget

· 5 min read

Truyền dữ liệu giữa các widget là một khía cạnh quan trọng trong phát triển ứng dụng Flutter. Bài viết này sẽ giới thiệu các phương pháp khác nhau để truyền dữ liệu giữa các widget.

Widget Data Passing

1. Truyền dữ liệu qua Constructor​

1.1. Truyền dữ liệu đơn giản​

class ParentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChildWidget(
      title: 'Hello',
      count: 42,
    );
  }
}

class ChildWidget extends StatelessWidget {
  final String title;
  final int count;

  const ChildWidget({
    Key? key,
    required this.title,
    required this.count,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(title),
        Text('Count: $count'),
      ],
    );
  }
}

1.2. Truyền Callback Functions​

class ParentWidget extends StatelessWidget {
  void _handleButtonPress() {
    print('Button pressed!');
  }

  @override
  Widget build(BuildContext context) {
    return ChildWidget(
      onButtonPressed: _handleButtonPress,
    );
  }
}

class ChildWidget extends StatelessWidget {
  final VoidCallback onButtonPressed;

  const ChildWidget({
    Key? key,
    required this.onButtonPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onButtonPressed,
      child: Text('Press Me'),
    );
  }
}

2. InheritedWidget​

2.1. Tạo InheritedWidget​

class UserData extends InheritedWidget {
  final String username;
  final String email;

  const UserData({
    Key? key,
    required this.username,
    required this.email,
    required Widget child,
  }) : super(key: key, child: child);

  static UserData of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<UserData>()!;
  }

  @override
  bool updateShouldNotify(UserData oldWidget) {
    return username != oldWidget.username || email != oldWidget.email;
  }
}

2.2. Sử dụng InheritedWidget​

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return UserData(
      username: 'john_doe',
      email: 'john@example.com',
      child: MaterialApp(
        home: HomeScreen(),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final userData = UserData.of(context);
    return Column(
      children: [
        Text('Username: ${userData.username}'),
        Text('Email: ${userData.email}'),
      ],
    );
  }
}

3. Provider Package​

3.1. Tạo Provider​

class UserProvider extends ChangeNotifier {
  String _username = '';
  String _email = '';

  String get username => _username;
  String get email => _email;

  void updateUser(String username, String email) {
    _username = username;
    _email = email;
    notifyListeners();
  }
}

3.2. Sử dụng Provider​

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => UserProvider(),
      child: MaterialApp(
        home: HomeScreen(),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final userProvider = Provider.of<UserProvider>(context);
    return Column(
      children: [
        Text('Username: ${userProvider.username}'),
        Text('Email: ${userProvider.email}'),
        ElevatedButton(
          onPressed: () {
            userProvider.updateUser('new_user', 'new@example.com');
          },
          child: Text('Update User'),
        ),
      ],
    );
  }
}

4. Stream và StreamBuilder​

4.1. Tạo Stream​

class DataStream {
  final _controller = StreamController<String>();

  Stream<String> get stream => _controller.stream;

  void addData(String data) {
    _controller.add(data);
  }

  void dispose() {
    _controller.close();
  }
}

4.2. Sử dụng StreamBuilder​

class StreamWidget extends StatelessWidget {
  final DataStream dataStream;

  const StreamWidget({
    Key? key,
    required this.dataStream,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<String>(
      stream: dataStream.stream,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return Text('Data: ${snapshot.data}');
        }
        return CircularProgressIndicator();
      },
    );
  }
}

5. Best Practices​

5.1. Chọn phương pháp phù hợp​

  • Constructor: Cho dữ liệu đơn giản và tĩnh
  • InheritedWidget: Cho dữ liệu được chia sẻ rộng rãi
  • Provider: Cho state management phức tạp
  • Stream: Cho dữ liệu thay đổi theo thời gian thực

5.2. Tối ưu hóa hiệu suất​

// Sử dụng const constructor khi có thể
const ChildWidget({
  required this.title,
  required this.count,
});

// Tránh rebuild không cần thiết
class OptimizedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<UserProvider>(
      builder: (context, userProvider, child) {
        return Column(
          children: [
            // Widget thay đổi
            Text(userProvider.username),
            // Widget không thay đổi
            child!,
          ],
        );
      },
      child: const StaticWidget(),
    );
  }
}

6. Ví dụ thực tế​

6.1. Ứng dụng Todo​

class TodoProvider extends ChangeNotifier {
  List<Todo> _todos = [];

  List<Todo> get todos => _todos;

  void addTodo(Todo todo) {
    _todos.add(todo);
    notifyListeners();
  }

  void removeTodo(String id) {
    _todos.removeWhere((todo) => todo.id == id);
    notifyListeners();
  }
}

class TodoList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<TodoProvider>(
      builder: (context, todoProvider, child) {
        return ListView.builder(
          itemCount: todoProvider.todos.length,
          itemBuilder: (context, index) {
            final todo = todoProvider.todos[index];
            return TodoItem(todo: todo);
          },
        );
      },
    );
  }
}

6.2. Ứng dụng Chat​

class ChatProvider extends ChangeNotifier {
  final _messages = <Message>[];
  final _streamController = StreamController<Message>();

  Stream<Message> get messageStream => _streamController.stream;

  void sendMessage(Message message) {
    _messages.add(message);
    _streamController.add(message);
    notifyListeners();
  }

  @override
  void dispose() {
    _streamController.close();
    super.dispose();
  }
}

class ChatScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: StreamBuilder<Message>(
            stream: context.read<ChatProvider>().messageStream,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return MessageBubble(message: snapshot.data!);
              }
              return Container();
            },
          ),
        ),
        MessageInput(
          onSend: (text) {
            context.read<ChatProvider>().sendMessage(
              Message(text: text, timestamp: DateTime.now()),
            );
          },
        ),
      ],
    );
  }
}

Kết luận​

Việc chọn phương pháp truyền dữ liệu phù hợp là rất quan trọng trong phát triển ứng dụng Flutter. Mỗi phương pháp có ưu điểm và trường hợp sử dụng riêng. Hiểu rõ các phương pháp này sẽ giúp bạn tạo ra ứng dụng có hiệu suất tốt và dễ bảo trì.

Tài liệu tham khảo:

Layout Widgets trong Flutter

· 4 min read

Layout Widgets in Flutter

Layout Widgets là những widget cơ bản trong Flutter dùng để sắp xếp và bố cục các widget con. Bài viết này sẽ giới thiệu về 4 widget bố cục phổ biến nhất: Container, Row, Column và Stack.

1. Container​

Container là một widget linh hoạt nhất trong Flutter, cho phép bạn tùy chỉnh nhiều thuộc tính của widget con.

Đặc điểm của Container:​

  • Có thể thêm padding và margin
  • Có thể tùy chỉnh kích thước
  • Có thể thêm border và background
  • Có thể thêm shadow và gradient

Ví dụ về Container:​

Container(
  width: 200,
  height: 200,
  padding: const EdgeInsets.all(16),
  margin: const EdgeInsets.all(8),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        blurRadius: 4,
        offset: const Offset(0, 2),
      ),
    ],
  ),
  child: const Text(
    'Hello World',
    style: TextStyle(color: Colors.white),
  ),
)

2. Row​

Row là widget dùng để sắp xếp các widget con theo chiều ngang.

Đặc điểm của Row:​

  • Sắp xếp các widget con theo chiều ngang
  • Có thể điều chỉnh alignment và spacing
  • Có thể sử dụng Expanded và Flexible
  • Có thể wrap các widget con

Ví dụ về Row:​

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    const Text('Left'),
    Container(
      padding: const EdgeInsets.all(8),
      color: Colors.blue,
      child: const Text('Center'),
    ),
    const Text('Right'),
  ],
)

Các thuộc tính quan trọng của Row:​

  • mainAxisAlignment: Căn chỉnh theo chiều ngang
  • crossAxisAlignment: Căn chỉnh theo chiều dọc
  • mainAxisSize: Kích thước theo chiều ngang
  • textDirection: Hướng của text
  • verticalDirection: Hướng của các widget con

3. Column​

Column là widget dùng để sắp xếp các widget con theo chiều dọc.

Đặc điểm của Column:​

  • Sắp xếp các widget con theo chiều dọc
  • Có thể điều chỉnh alignment và spacing
  • Có thể sử dụng Expanded và Flexible
  • Có thể scroll nếu nội dung dài

Ví dụ về Column:​

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    const Text('Top'),
    Container(
      padding: const EdgeInsets.all(8),
      color: Colors.blue,
      child: const Text('Center'),
    ),
    const Text('Bottom'),
  ],
)

Các thuộc tính quan trọng của Column:​

  • mainAxisAlignment: Căn chỉnh theo chiều dọc
  • crossAxisAlignment: Căn chỉnh theo chiều ngang
  • mainAxisSize: Kích thước theo chiều dọc
  • textDirection: Hướng của text
  • verticalDirection: Hướng của các widget con

4. Stack​

Stack là widget dùng để xếp chồng các widget con lên nhau.

Đặc điểm của Stack:​

  • Xếp chồng các widget con
  • Có thể định vị chính xác các widget con
  • Có thể sử dụng Positioned để đặt vị trí
  • Phù hợp cho các layout phức tạp

Ví dụ về Stack:​

Stack(
  children: [
    Image.network('https://example.com/image.jpg'),
    Positioned(
      bottom: 16,
      right: 16,
      child: Container(
        padding: const EdgeInsets.all(8),
        color: Colors.black.withOpacity(0.5),
        child: const Text(
          'Overlay Text',
          style: TextStyle(color: Colors.white),
        ),
      ),
    ),
  ],
)

Các thuộc tính quan trọng của Stack:​

  • alignment: Căn chỉnh các widget con
  • fit: Cách widget con được fit vào Stack
  • clipBehavior: Cách xử lý overflow
  • children: Danh sách các widget con

5. Kết hợp các Layout Widgets​

Ví dụ về form đăng nhập:​

Container(
  padding: const EdgeInsets.all(16),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      const Text(
        'Login',
        style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
      ),
      const SizedBox(height: 16),
      TextField(
        decoration: InputDecoration(
          labelText: 'Username',
          border: OutlineInputBorder(),
        ),
      ),
      const SizedBox(height: 8),
      TextField(
        decoration: InputDecoration(
          labelText: 'Password',
          border: OutlineInputBorder(),
        ),
        obscureText: true,
      ),
      const SizedBox(height: 16),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          TextButton(
            onPressed: () {},
            child: const Text('Forgot Password?'),
          ),
          ElevatedButton(
            onPressed: () {},
            child: const Text('Login'),
          ),
        ],
      ),
    ],
  ),
)

6. Best Practices​

6.1. Sử dụng Container​

  • Sử dụng Container khi cần tùy chỉnh nhiều thuộc tính
  • Tránh lồng nhiều Container không cần thiết
  • Sử dụng BoxDecoration cho các hiệu ứng phức tạp

6.2. Sử dụng Row và Column​

  • Sử dụng mainAxisAlignment và crossAxisAlignment phù hợp
  • Sử dụng Expanded và Flexible khi cần
  • Tránh Row và Column quá sâu

6.3. Sử dụng Stack​

  • Sử dụng Positioned để đặt vị trí chính xác
  • Cẩn thận với overflow
  • Sử dụng clipBehavior phù hợp

Kết luận​

Layout Widgets là những công cụ mạnh mẽ trong Flutter để tạo giao diện người dùng. Hiểu rõ cách sử dụng Container, Row, Column và Stack sẽ giúp bạn tạo ra các layout phức tạp một cách dễ dàng và hiệu quả.

Tài liệu tham khảo:

Flutter: ListView và GridView widgets

· 4 min read

ListView và GridView là hai widget quan trọng trong Flutter để hiển thị dữ liệu dạng danh sách và lưới. Bài viết này sẽ hướng dẫn bạn cách sử dụng chúng một cách hiệu quả.

1. ListView Widget​

ListView là widget được sử dụng để hiển thị danh sách các phần tử theo chiều dọc hoặc ngang.

ListView Widget Examples

1.1. Basic ListView​

ListView(
  children: [
    ListTile(
      leading: Icon(Icons.star),
      title: Text('Item 1'),
      subtitle: Text('Description 1'),
    ),
    ListTile(
      leading: Icon(Icons.star),
      title: Text('Item 2'),
      subtitle: Text('Description 2'),
    ),
    ListTile(
      leading: Icon(Icons.star),
      title: Text('Item 3'),
      subtitle: Text('Description 3'),
    ),
  ],
)

1.2. ListView.builder​

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      leading: Icon(Icons.star),
      title: Text(items[index].title),
      subtitle: Text(items[index].description),
    );
  },
)

1.3. ListView.separated​

ListView.separated(
  itemCount: items.length,
  separatorBuilder: (context, index) => Divider(),
  itemBuilder: (context, index) {
    return ListTile(
      leading: Icon(Icons.star),
      title: Text(items[index].title),
      subtitle: Text(items[index].description),
    );
  },
)

1.4. Horizontal ListView​

ListView(
  scrollDirection: Axis.horizontal,
  children: [
    Container(
      width: 160,
      margin: EdgeInsets.all(8),
      color: Colors.blue,
      child: Center(child: Text('Item 1')),
    ),
    Container(
      width: 160,
      margin: EdgeInsets.all(8),
      color: Colors.green,
      child: Center(child: Text('Item 2')),
    ),
    Container(
      width: 160,
      margin: EdgeInsets.all(8),
      color: Colors.red,
      child: Center(child: Text('Item 3')),
    ),
  ],
)

2. GridView Widget​

GridView là widget được sử dụng để hiển thị dữ liệu dạng lưới với các cột và hàng.

GridView Widget Examples

2.1. GridView.count​

GridView.count(
  crossAxisCount: 2,
  children: [
    Container(
      margin: EdgeInsets.all(8),
      color: Colors.blue,
      child: Center(child: Text('Item 1')),
    ),
    Container(
      margin: EdgeInsets.all(8),
      color: Colors.green,
      child: Center(child: Text('Item 2')),
    ),
    Container(
      margin: EdgeInsets.all(8),
      color: Colors.red,
      child: Center(child: Text('Item 3')),
    ),
    Container(
      margin: EdgeInsets.all(8),
      color: Colors.yellow,
      child: Center(child: Text('Item 4')),
    ),
  ],
)

2.2. GridView.builder​

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
  ),
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Center(
        child: Text(items[index].title),
      ),
    );
  },
)

2.3. GridView.extent​

GridView.extent(
  maxCrossAxisExtent: 200,
  children: [
    Container(
      margin: EdgeInsets.all(8),
      color: Colors.blue,
      child: Center(child: Text('Item 1')),
    ),
    Container(
      margin: EdgeInsets.all(8),
      color: Colors.green,
      child: Center(child: Text('Item 2')),
    ),
    Container(
      margin: EdgeInsets.all(8),
      color: Colors.red,
      child: Center(child: Text('Item 3')),
    ),
    Container(
      margin: EdgeInsets.all(8),
      color: Colors.yellow,
      child: Center(child: Text('Item 4')),
    ),
  ],
)

3. Best Practices​

3.1. ListView​

  • Sử dụng ListView.builder cho danh sách dài
  • Thêm padding và spacing phù hợp
  • Xử lý scroll physics khi cần
  • Sử dụng const constructor khi có thể

3.2. GridView​

  • Chọn số cột phù hợp với kích thước màn hình
  • Thêm spacing giữa các item
  • Sử dụng GridView.builder cho danh sách dài
  • Tối ưu hóa kích thước item

3.3. Performance​

  • Sử dụng const constructor
  • Tránh rebuild không cần thiết
  • Sử dụng ListView.builder và GridView.builder
  • Tối ưu hóa widget tree

4. Ví dụ thực tế​

4.1. Danh sách sản phẩm​

ListView.builder(
  itemCount: products.length,
  itemBuilder: (context, index) {
    final product = products[index];
    return Card(
      child: ListTile(
        leading: Image.network(product.imageUrl),
        title: Text(product.name),
        subtitle: Text(product.price.toString()),
        trailing: IconButton(
          icon: Icon(Icons.shopping_cart),
          onPressed: () {
            // Add to cart
          },
        ),
      ),
    );
  },
)

4.2. Lưới hình ảnh​

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    crossAxisSpacing: 4,
    mainAxisSpacing: 4,
  ),
  itemCount: images.length,
  itemBuilder: (context, index) {
    return Image.network(
      images[index],
      fit: BoxFit.cover,
    );
  },
)

Kết luận​

ListView và GridView là những widget mạnh mẽ trong Flutter để hiển thị dữ liệu dạng danh sách và lưới. Việc hiểu rõ cách sử dụng chúng sẽ giúp bạn tạo ra giao diện người dùng hiệu quả và đẹp mắt.

Tài liệu tham khảo:

Stateless và Stateful Widgets trong Flutter

· 4 min read

Stateless vs Stateful Widgets

Trong Flutter, có hai loại widget cơ bản: StatelessWidget và StatefulWidget. Việc hiểu rõ sự khác biệt giữa hai loại widget này là rất quan trọng để xây dựng ứng dụng Flutter hiệu quả.

1. StatelessWidget​

StatelessWidget là widget không có state (trạng thái). Nó là immutable (không thể thay đổi) sau khi được tạo.

Đặc điểm của StatelessWidget:​

  • Không có state
  • Không thể thay đổi sau khi được tạo
  • Phù hợp cho UI tĩnh
  • Hiệu năng tốt hơn vì không cần rebuild

Ví dụ về StatelessWidget:​

class GreetingWidget extends StatelessWidget {
  final String name;
  
  const GreetingWidget({
    super.key, 
    required this.name
  });
  
  @override
  Widget build(BuildContext context) {
    return Text('Hello, $name!');
  }
}

Khi nào sử dụng StatelessWidget:​

  • Hiển thị thông tin tĩnh
  • Widget chỉ phụ thuộc vào các tham số đầu vào
  • Không cần thay đổi UI theo thời gian
  • Không cần lưu trữ dữ liệu

2. StatefulWidget​

StatefulWidget là widget có state (trạng thái). Nó có thể thay đổi trong quá trình sử dụng.

Đặc điểm của StatefulWidget:​

  • Có state
  • Có thể thay đổi sau khi được tạo
  • Phù hợp cho UI động
  • Cần rebuild khi state thay đổi

Ví dụ về StatefulWidget:​

class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});
  
  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;
  
  void _increment() {
    setState(() {
      _count++;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $_count'),
        ElevatedButton(
          onPressed: _increment,
          child: const Text('Increment'),
        ),
      ],
    );
  }
}

Khi nào sử dụng StatefulWidget:​

  • UI cần thay đổi theo thời gian
  • Cần lưu trữ dữ liệu
  • Có tương tác người dùng
  • Cần thực hiện các tác vụ bất đồng bộ

3. So sánh StatelessWidget và StatefulWidget​

Đặc điểmStatelessWidgetStatefulWidget
StateKhông cóCó
ImmutableCóKhông
Hiệu năngTốt hơnKém hơn
Sử dụngUI tĩnhUI động
CodeĐơn giảnPhức tạp hơn

4. Best Practices​

4.1. Sử dụng StatelessWidget khi có thể​

  • Ưu tiên sử dụng StatelessWidget nếu không cần state
  • Tách các phần UI tĩnh thành StatelessWidget riêng

4.2. Quản lý State hiệu quả​

  • Chỉ lưu trữ state cần thiết
  • Sử dụng setState một cách hợp lý
  • Tránh rebuild không cần thiết

4.3. Tổ chức code​

  • Tách biệt logic và UI
  • Sử dụng các widget có thể tái sử dụng
  • Đặt tên rõ ràng cho các widget

5. Ví dụ thực tế​

5.1. StatelessWidget - ProductCard​

class ProductCard extends StatelessWidget {
  final String name;
  final double price;
  final String imageUrl;
  
  const ProductCard({
    super.key,
    required this.name,
    required this.price,
    required this.imageUrl,
  });
  
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: [
          Image.network(imageUrl),
          Text(name),
          Text('\$$price'),
        ],
      ),
    );
  }
}

5.2. StatefulWidget - ShoppingCart​

class ShoppingCart extends StatefulWidget {
  const ShoppingCart({super.key});
  
  @override
  State<ShoppingCart> createState() => _ShoppingCartState();
}

class _ShoppingCartState extends State<ShoppingCart> {
  final List<CartItem> _items = [];
  
  void _addItem(CartItem item) {
    setState(() {
      _items.add(item);
    });
  }
  
  void _removeItem(int index) {
    setState(() {
      _items.removeAt(index);
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: _items.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(_items[index].name),
          trailing: IconButton(
            icon: const Icon(Icons.delete),
            onPressed: () => _removeItem(index),
          ),
        );
      },
    );
  }
}

Kết luận​

Việc lựa chọn giữa StatelessWidget và StatefulWidget phụ thuộc vào yêu cầu của ứng dụng. StatelessWidget đơn giản và hiệu quả cho UI tĩnh, trong khi StatefulWidget linh hoạt hơn cho UI động. Hiểu rõ sự khác biệt giữa hai loại widget này sẽ giúp bạn xây dựng ứng dụng Flutter tốt hơn.

Tài liệu tham khảo:

Flutter: Làm việc với Text, Image và Icon widgets

· 4 min read

Text, Image và Icon là những widget cơ bản và quan trọng trong Flutter. Bài viết này sẽ hướng dẫn bạn cách sử dụng chúng một cách hiệu quả.

1. Text Widget​

Text widget được sử dụng để hiển thị văn bản trong ứng dụng Flutter.

Text Widget Examples

1.1. Cú pháp cơ bản​

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
)

1.2. Các thuộc tính phổ biến​

Style​

TextStyle(
  fontSize: 20,          // Kích thước chữ
  fontWeight: FontWeight.bold,  // Độ đậm
  fontStyle: FontStyle.italic,  // Kiểu chữ
  color: Colors.red,     // Màu chữ
  letterSpacing: 2.0,    // Khoảng cách giữa các chữ
  wordSpacing: 5.0,      // Khoảng cách giữa các từ
  height: 1.5,           // Chiều cao dòng
  decoration: TextDecoration.underline,  // Gạch chân
)

TextAlign​

Text(
  'Căn giữa văn bản',
  textAlign: TextAlign.center,
)

MaxLines và Overflow​

Text(
  'Văn bản dài...',
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

1.3. Rich Text​

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: TextStyle(color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: 'Flutter',
        style: TextStyle(
          color: Colors.blue,
          fontWeight: FontWeight.bold,
        ),
      ),
      TextSpan(text: '!'),
    ],
  ),
)

2. Image Widget​

Image widget được sử dụng để hiển thị hình ảnh trong ứng dụng Flutter.

Image Widget Examples

2.1. Các loại Image​

Network Image​

Image.network(
  'https://example.com/image.jpg',
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return CircularProgressIndicator(
      value: loadingProgress.expectedTotalBytes != null
          ? loadingProgress.cumulativeBytesLoaded /
              loadingProgress.expectedTotalBytes!
          : null,
    );
  },
)

Asset Image​

Image.asset(
  'assets/images/flutter_logo.png',
  width: 200,
  height: 200,
)

File Image​

Image.file(
  File('/path/to/image.jpg'),
  fit: BoxFit.cover,
)

2.2. Các thuộc tính phổ biến​

Fit​

Image.network(
  'https://example.com/image.jpg',
  fit: BoxFit.cover,  // Các giá trị: contain, cover, fill, fitWidth, fitHeight
)

Width và Height​

Image.network(
  'https://example.com/image.jpg',
  width: 200,
  height: 200,
)

Error Handling​

Image.network(
  'https://example.com/image.jpg',
  errorBuilder: (context, error, stackTrace) {
    return const Icon(Icons.error);
  },
)

3. Icon Widget​

Icon widget được sử dụng để hiển thị các biểu tượng trong ứng dụng Flutter.

Icon Widget Examples

3.1. Material Icons​

Icon(
  Icons.favorite,
  color: Colors.red,
  size: 30,
)

3.2. Cupertino Icons​

Icon(
  CupertinoIcons.heart_fill,
  color: CupertinoColors.systemRed,
  size: 30,
)

3.3. Custom Icons​

Icon(
  IconData(0xe800, fontFamily: 'CustomIcons'),
  color: Colors.blue,
  size: 30,
)

4. Kết hợp các Widget​

4.1. Row với Icon và Text​

Row(
  children: [
    Icon(Icons.star, color: Colors.amber),
    const SizedBox(width: 8),
    Text('Favorite'),
  ],
)

4.2. Column với Image và Text​

Column(
  children: [
    Image.network(
      'https://example.com/image.jpg',
      width: 200,
      height: 200,
    ),
    const SizedBox(height: 16),
    Text(
      'Image Title',
      style: TextStyle(fontSize: 20),
    ),
  ],
)

5. Best Practices​

5.1. Text​

  • Sử dụng const constructor khi có thể
  • Tách TextStyle thành các theme riêng
  • Xử lý overflow một cách phù hợp
  • Sử dụng RichText cho văn bản phức tạp

5.2. Image​

  • Luôn chỉ định kích thước cho Image
  • Sử dụng loadingBuilder và errorBuilder
  • Tối ưu hóa kích thước hình ảnh
  • Sử dụng cache cho network images

5.3. Icon​

  • Sử dụng Material Icons cho Android
  • Sử dụng Cupertino Icons cho iOS
  • Tạo custom icons khi cần thiết
  • Đảm bảo kích thước icon phù hợp

Kết luận​

Text, Image và Icon là những widget cơ bản nhưng rất quan trọng trong Flutter. Việc hiểu rõ cách sử dụng chúng sẽ giúp bạn tạo ra giao diện người dùng đẹp và hiệu quả.

Tài liệu tham khảo:

Widget Tree và các loại Widget trong Flutter

· 4 min read

Flutter Widget Tree

Widget là thành phần cơ bản trong Flutter, mọi thứ bạn nhìn thấy trên màn hình đều là widget. Bài viết này sẽ giúp bạn hiểu rõ về cấu trúc Widget Tree và các loại widget phổ biến trong Flutter.

1. Widget Tree là gì?​

Widget Tree là cấu trúc phân cấp của các widget trong ứng dụng Flutter. Mỗi widget có thể chứa các widget con, tạo thành một cây các widget.

MaterialApp
└── Scaffold
    ├── AppBar
    │   └── Text
    └── Column
        ├── Text
        ├── SizedBox
        └── ElevatedButton
            └── Text

Đặc điểm của Widget Tree:​

  • Cấu trúc phân cấp
  • Widget cha chứa widget con
  • Mỗi widget có thể có nhiều widget con
  • Widget con kế thừa các thuộc tính từ widget cha

2. Các loại Widget cơ bản​

2.1. StatelessWidget vs StatefulWidget​

StatelessWidget​

  • Widget không có state (trạng thái)
  • Không thể thay đổi sau khi được tạo
  • Phù hợp cho UI tĩnh
class GreetingWidget extends StatelessWidget {
  final String name;
  
  const GreetingWidget({super.key, required this.name});
  
  @override
  Widget build(BuildContext context) {
    return Text('Hello, $name!');
  }
}

StatefulWidget​

  • Widget có state (trạng thái)
  • Có thể thay đổi trong quá trình sử dụng
  • Phù hợp cho UI động
class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});
  
  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;
  
  void _increment() {
    setState(() {
      _count++;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $_count'),
        ElevatedButton(
          onPressed: _increment,
          child: const Text('Increment'),
        ),
      ],
    );
  }
}

2.2. Các Widget phổ biến​

Layout Widgets​

  1. Container

    • Widget linh hoạt nhất
    • Có thể định dạng padding, margin, border, background
    Container(
      padding: const EdgeInsets.all(16),
      margin: const EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Text('Hello'),
    )

  2. Row và Column

    • Sắp xếp các widget theo chiều ngang/dọc
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text('Left'),
        Text('Center'),
        Text('Right'),
      ],
    )

  3. Stack

    • Xếp chồng các widget lên nhau
    Stack(
      children: [
        Image.network('url'),
        Positioned(
          bottom: 16,
          right: 16,
          child: Text('Overlay'),
        ),
      ],
    )

Input Widgets​

  1. TextField

    • Nhập liệu văn bản
    TextField(
      decoration: InputDecoration(
        labelText: 'Username',
        hintText: 'Enter your username',
      ),
    )

  2. ElevatedButton

    • Nút bấm có hiệu ứng nổi
    ElevatedButton(
      onPressed: () {
        // Handle press
      },
      child: const Text('Click me'),
    )

Display Widgets​

  1. Text

    • Hiển thị văn bản
    Text(
      'Hello World',
      style: TextStyle(
        fontSize: 24,
        fontWeight: FontWeight.bold,
      ),
    )

  2. Image

    • Hiển thị hình ảnh
    Image.network(
      'https://example.com/image.jpg',
      width: 200,
      height: 200,
    )

3. Quản lý State trong Widget Tree​

3.1. Local State​

  • Sử dụng setState trong StatefulWidget
  • Phù hợp cho state đơn giản, chỉ ảnh hưởng đến widget hiện tại

3.2. Global State​

  • Sử dụng state management (Provider, Bloc, GetX)
  • Phù hợp cho state phức tạp, được chia sẻ giữa nhiều widget

4. Best Practices​

  1. Tổ chức Widget Tree

    • Tách các widget phức tạp thành các widget nhỏ hơn
    • Sử dụng các widget có thể tái sử dụng
    • Tránh widget tree quá sâu

  2. Performance

    • Sử dụng const constructor khi có thể
    • Tránh rebuild không cần thiết
    • Sử dụng ListView.builder cho danh sách dài

  3. State Management

    • Chọn giải pháp state management phù hợp
    • Tránh prop drilling
    • Tách biệt logic và UI

Kết luận​

Hiểu rõ về Widget Tree và các loại widget là nền tảng quan trọng trong phát triển Flutter. Với kiến thức này, bạn có thể xây dựng UI phức tạp và quản lý state hiệu quả.

Tài liệu tham khảo: