Flutter Styling & Theming Widgets #

Purpose: These widgets control the visual appearance of your app—colors, text styles, sizes, animations, and responsiveness. They allow consistent design and customization across the entire app.

---

1. Theme & ThemeData #

Defines global colors, fonts, button styles, app bars, and more.

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    textTheme: TextTheme(bodyLarge: TextStyle(fontSize: 18)),
  ),
);

Use case: Consistent design system across the app.

---

2. MediaQuery #

Provides info about screen size, orientation, padding, and text scaling.

var width = MediaQuery.of(context).size.width;

Use case: Responsive UI according to device dimensions.

---

3. DefaultTextStyle #

Applies a default text style to all descendant Text widgets.

DefaultTextStyle(
  style: TextStyle(color: Colors.black, fontSize: 18),
  child: Column(children: [Text("Hello"), Text("World")]),
);

Use case: Reduce repeated text style code.

---

4. ColorFiltered #

Applies a filter to alter the color output of its child.

ColorFiltered(
  colorFilter: ColorFilter.mode(Colors.grey, BlendMode.saturation),
  child: Image.asset('image.png'),
);

Use case: Grayscale effects, tinting, brightness adjustments.

---

5. Opacity #

Adjusts the transparency of a widget.

Opacity(
  opacity: 0.5,
  child: Text("Faded Text"),
);

Use case: Animations, disabling UI visually, overlays.

---

6. DecoratedBox #

Allows decorating child widgets with borders, background colors, gradients, or shapes.

DecoratedBox(
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8),
  ),
  child: Padding(
    padding: EdgeInsets.all(12),
    child: Text("Styled Box"),
  ),
);

Use case: Custom UI elements, professional styling without using Container.

---

7. ClipRect, ClipRRect, ClipOval #

Clip widgets to shapes.

• ClipRect: Rectangle clipping
• ClipRRect: Rounded rectangle clipping
• ClipOval: Circular/oval clipping

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: Image.asset("profile.jpg"),
);

Use case: Profile images, custom shapes, masking parts of UI.

---

8. ShaderMask #

Applies gradients, patterns, or shader effects on a widget.

ShaderMask(
  shaderCallback: (bounds) => LinearGradient(
    colors: [Colors.red, Colors.blue],
  ).createShader(bounds),
  child: Text("Gradient Text"),
);

Use case: Advanced visual effects.

---

9. Transform #

Rotate, scale, or translate a widget.

Transform.rotate(
  angle: 0.3,
  child: Icon(Icons.refresh),
);

Use case: Animations, creative UI elements, custom transitions.

---

10. AnimatedDefaultTextStyle #

Automatically animates text style changes.

AnimatedDefaultTextStyle(
  duration: Duration(milliseconds: 300),
  style: TextStyle(fontSize: isBig ? 30 : 16),
  child: Text("Animated Text"),
);

Use case: Smooth UI text transitions.

---

✔ Summary #

Styling & Theming widgets help you manage:

• Global app design
• Responsive UI (MediaQuery)
• Text styling (DefaultTextStyle)
• Visual effects (ColorFiltered, Opacity, ShaderMask)
• Shapes & clipping
• Transformations
• Consistent branding

These widgets are essential for creating beautiful, professional Flutter apps.