Flutter Text, Buttons, Icons, and Images

# CHAPTER 9

Flutter Text, Buttons, Icons, and Images #

1. Introduction #

2. Learning Objectives #

• Style typography using the Text widget and TextStyle.

• Implement modern Material buttons (ElevatedButton, TextButton).

• Render vector graphics using the Icon widget.

• Display images from the internet using Image.network.

• Display local project images using Image.asset.

3. Text and Typography #

Text(
  "Welcome to Flutter!",
  style: TextStyle(
    fontSize: 24.0,           // Size of the font
    fontWeight: FontWeight.bold, // Make it bold
    color: Colors.blueAccent,    // Change color
    letterSpacing: 2.0,       // Space between characters
    fontStyle: FontStyle.italic,
  ),
  textAlign: TextAlign.center, // Center the text block
)

4. The Material Button Suite #

• ElevatedButton: A raised button with a background color and drop shadow. Primary call-to-action (e.g., "Submit").

• TextButton: A flat, transparent button. Secondary action (e.g., "Cancel" or "Forgot Password").

• OutlinedButton: A transparent button with a colored border.

ElevatedButton(
  onPressed: () {
    print("Button Clicked!"); // Runs when tapped
  },
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.green, // Background color
    foregroundColor: Colors.white, // Text color
    elevation: 5, // Shadow depth
  ),
  child: Text("Submit Form"),
)

5. Icons and IconButtons #

• Icon(Icons.home, color: Colors.blue, size: 30): Displays a static home icon.

• IconButton: Turns an icon into a clickable button with a circular ripple effect.

IconButton(
  icon: Icon(Icons.favorite),
  color: Colors.red,
  iconSize: 40,
  onPressed: () {
    print("Heart Clicked!");
  },
)

6. Images (Network and Asset) #

Image.network(
  'https://example.com/cute_dog.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover, // Crops the image to perfectly fill the 200x200 box!
)

2. Local Images (Asset): As discussed in Chapter 4, if you put an image in your assets/ folder and register it in pubspec.yaml, you can load it offline:

Image.asset('assets/images/logo.png', width: 100)

7. Circular Images (Avatars) #

CircleAvatar(
  radius: 50, // Size of the circle
  backgroundImage: NetworkImage('https://example.com/profile.jpg'),
)

8. Visual Learning: BoxFit Properties #

• BoxFit.contain: Scales the image so the entire thing is visible (leaves empty borders).

• BoxFit.cover: Zooms in and crops the image so there is no empty space. (Used 90% of the time for modern UI).

• BoxFit.fill: Stretches and distorts the image to fit the box. (Rarely used).

9. Best Practices #

• Null Safety in Buttons: If you want to disable a button (make it greyed out and unclickable), set the onPressed property to null.

10. Common Mistakes #

• Forgetting Image.network requires Internet: If your Android emulator does not have internet access configured properly, Image.network will silently fail and show a blank space or throw a network error in the console.

11. Mini Project: Build an Instagram Post Header #

1. 1. Create a Row. Add padding to it.

1. 2. The first child is a CircleAvatar displaying a profile picture (NetworkImage).

1. 3. Add a SizedBox(width: 10) for spacing.

1. 4. Add a Column containing two Text widgets: "username" (bold) and "Sponsored" (grey, small). Set the Column's crossAxisAlignment to Start.

1. 5. Wrap that Column in an Expanded widget to push the next item to the far right.

1. 6. The final child is an IconButton displaying Icons.more_vert (the three dots menu).

1. 7. You have just built a production-ready social media UI header!

12. Practice Exercises #

1. 1. Write the code to create an ElevatedButton that prints "Login" to the console when clicked.

1. 2. What property of the Text widget do you modify to center-align a paragraph of text?

13. MCQs with Answers #

14. Interview Questions #

• Q: Explain the visual and semantic differences between an ElevatedButton, an OutlinedButton, and a TextButton in Flutter's Material Design system.

• Q: Contrast Image.asset with Image.network. Explain the setup required in the project architecture for Image.asset to function correctly.

• Q: A developer wants to temporarily disable a "Submit" button until a form is fully filled out. How is a button disabled in Flutter without creating a custom UI overlay?

15. FAQs #

16. Summary #

17. Next Chapter Recommendation #