Khi nào chúng ta sử dụng double.INFINITY?

Question

Thành Đạt · Accepted Answer

double.INFINITY là một khái niệm quan trọng trong Flutter, được sử dụng để xác định kích thước tối đa không giới hạn cho các widget. Hiểu và áp dụng đúng double.INFINITY sẽ giúp bạn tạo ra layout linh hoạt, responsive và tối ưu hiệu suất cho ứng dụng của mình. Bài viết này sẽ hướng dẫn chi tiết các trường hợp sử dụng phổ biến cùng với các best practices khi làm việc với double.INFINITY.
HƯỚNG DẪN SỬ DỤNG double.INFINITY TRONG FLUTTER
1. Khái niệm double.INFINITY
double.INFINITY là một giá trị đặc biệt trong Dart/Flutter đại diện cho vô cùng. Nó lớn hơn bất kỳ số hữu hạn nào.
void main() {
  print(double.INFINITY > 999999999); // true
  print(double.INFINITY == double.INFINITY); // true
  print(double.INFINITY + 1 == double.INFINITY); // true
}
2. Sử dụng trong Widget Sizing
a. Container và SizedBox
Container(
  width: double.infinity,  // Chiều rộng tối đa có thể
  height: 100,
  color: Colors.blue,
  child: Text('Full width container'),
)
b. Trong ListView và Column
ListView(
  children: &#x5B;
    Container(
      constraints: BoxConstraints(
        maxWidth: double.infinity,
        minHeight: 50,
      ),
      color: Colors.red,
    ),
  ],
)
3. Sử dụng trong Constraints
a. Flexible Constraints
ConstrainedBox(
  constraints: BoxConstraints(
    maxWidth: double.infinity,
    maxHeight: double.infinity,
  ),
  child: Container(
    color: Colors.green,
  ),
)
b. CustomScrollView và SliverFillRemaining
CustomScrollView(
  slivers: &#x5B;
    SliverFillRemaining(
      hasScrollBody: false,
      child: Container(
        constraints: BoxConstraints.expand(
          width: double.infinity,
          height: double.infinity,
        ),
      ),
    ),
  ],
)
4. Trường hợp nên sử dụng
a. Responsive Design
class ResponsiveWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return Container(
          width: constraints.maxWidth == double.infinity 
              ? MediaQuery.of(context).size.width 
              : constraints.maxWidth,
          child: Text('Responsive content'),
        );
      },
    );
  }
}
b. Wrap Content
Wrap(
  children: &#x5B;
    Container(
      constraints: BoxConstraints(
        maxWidth: double.infinity,
      ),
      child: Text('This text can wrap to multiple lines if needed'),
    ),
  ],
)
5. Tối ưu hiệu suất
a. Tránh lạm dụng
// KHÔNG NÊN
Container(
  width: double.infinity,
  height: double.infinity,
  child: SingleChildScrollView(
    child: Column(
      children: List.generate(1000, (index) => Container()),
    ),
  ),
)
// NÊN
LayoutBuilder(
  builder: (context, constraints) {
    return Container(
      width: constraints.maxWidth,
      height: constraints.maxHeight,
      child: ListView.builder(
        itemCount: 1000,
        itemBuilder: (context, index) => Container(),
      ),
    );
  },
)
6. Các trường hợp đặc biệt
a. AnimatedContainer
AnimatedContainer(
  duration: Duration(milliseconds: 300),
  width: isExpanded ? double.infinity : 200,
  height: 100,
  color: Colors.blue,
)
b. MediaQuery
class ResponsiveScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    return Container(
      width: screenWidth == double.infinity 
          ? 600 
          : screenWidth * 0.9,
      child: Card(
        child: Text('Responsive card'),
      ),
    );
  }
}
7. Debug và xử lý lỗi
void debugConstraints(BoxConstraints constraints) {
  if (constraints.maxWidth == double.infinity &&
      constraints.maxHeight == double.infinity) {
    print('Warning: Unbounded constraints detected');
  }
}
class DebugContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        debugConstraints(constraints);
        return Container();
      },
    );
  }
}