---

Flutter Display & Information Widgets #

Purpose: Display text, icons, images, and visual elements that convey information or organize UI content.

1. Text #

Displays a string of text with customizable style.

Text(
  'Welcome to Flutter!',
  style: TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.bold,
    color: Colors.blueAccent,
  ),
)

---

2. RichText #

Used to display multi-styled text within a single widget.

RichText(
  text: TextSpan(
    text: 'Flutter ',
    style: TextStyle(color: Colors.black, fontSize: 18),
    children: [
      TextSpan(
        text: 'Rocks!',
        style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
      ),
    ],
  ),
)

---

3. Image #

Displays images from various sources (assets, network, file, memory).

From Asset:

Image.asset('assets/images/logo.png')

From Network:

Image.network('https://example.com/image.jpg')

From File:

Image.file(File('path/to/image.png'))

From Memory:

Image.memory(bytes)

Fit Example:

Image.asset(
  'assets/banner.jpg',
  fit: BoxFit.cover,
)

---

4. Icon #

Displays icons from the Material or custom icon sets.

Icon(
  Icons.home,
  size: 30,
  color: Colors.blue,
)

---

🧾 5. CircleAvatar #

Displays circular images or initials, often used for profile pictures.

CircleAvatar(
  radius: 30,
  backgroundImage: AssetImage('assets/profile.jpg'),
)

With Text:

CircleAvatar(
  radius: 25,
  backgroundColor: Colors.blue,
  child: Text('MS', style: TextStyle(color: Colors.white)),
)

---

6. Chip Widgets #

Used for compact elements like tags, filters, or options.

Chip:

Chip(
  label: Text('Flutter'),
  avatar: Icon(Icons.code, size: 18),
)

InputChip:

InputChip(
  label: Text('Username'),
  onDeleted: () => print('Deleted'),
)

FilterChip:

FilterChip(
  label: Text('Design'),
  selected: true,
  onSelected: (val) => print('Selected: $val'),
)

ChoiceChip:

ChoiceChip(
  label: Text('UI'),
  selected: false,
  onSelected: (val) {},
)

---

7. Tooltip #

Displays a message when the user hovers or long-presses an element.

Tooltip(
  message: 'Settings',
  child: Icon(Icons.settings),
)

---

8. Divider #

Creates a horizontal line to separate content visually.

Divider(
  color: Colors.grey,
  thickness: 1,
  height: 20,
)

---

9. Card #

Used for grouping related content with elevation and rounded corners.

Card(
  elevation: 4,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
  ),
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('Flutter Card', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
        SizedBox(height: 8),
        Text('Cards are used for structured information with shadow.'),
      ],
    ),
  ),
)

---

📱 Responsive Design Tip #

Wrap text and images inside FittedBox, Flexible, or Expanded for adaptive UI.

Flexible(
  child: Text(
    'Responsive text example that adjusts within layout constraints.',
    overflow: TextOverflow.ellipsis,
  ),
)