Flutter Exercises for Beginners

Welcome to the second part of our Flutter series! This section might seem simple, but it plays a crucial role in determining whether you’re fit into programming. If you can complete these tasks and grasp the concepts, then you can master Flutter. These simple exercises will help you get hands-on experience with Flutter. By making small changes to a basic Flutter app, you’ll learn how to modify app properties, widgets, and behavior. Let's dive into some practical tasks:

1. Change the App Title

Objective: Update the app title that appears in the phone's task switcher or app label.

• What to do: Modify the title property in the MaterialApp widget.

• How to do it: Open lib/main.dart and look for the MaterialApp widget.

MaterialApp(
  title: 'My First Flutter App', // Change this line
  home: MyHomePage(),
)

• Observation: The title in the phone's task manager will reflect the new name. If you can’t observe it, skip to the next exercise.

2. Change the AppBar Title

Objective: Modify the title that appears in the app's AppBar.

• What to do: Change the Text widget inside the AppBar.

• How to do it: Locate the Scaffold widget in MyHomePage and edit its AppBar.

appBar: AppBar(
  title: Text('Welcome to Flutter'), // Change this line
),

• Observation: The AppBar text at the top of the app changes.

3. Change the Default Counter Text Style

Objective: Customize the counter text by modifying its style.

• What to do: Add or change the TextStyle property of the Text widget that displays the counter.

• How to do it: Locate the Text widget in the build method.

Text(
  '$_counter',
  style: TextStyle(fontSize: 36, color: Colors.red), // Add a style
),

• Observation: The counter text now appears larger and in a different color.

4. Change the FloatingActionButton Icon

Objective: Replace the default plus (+) icon with a different one.

• What to do: Modify the child property of the FloatingActionButton.

• How to do it: Locate the FloatingActionButton widget and change the Icon.

floatingActionButton: FloatingActionButton(
  onPressed: _incrementCounter,
  child: Icon(Icons.thumb_up), // Change the icon
),

• Observation: The button icon changes from + to a thumbs-up icon.

5. Change the FloatingActionButton Color

Objective: Change the background color of the floating action button.

• What to do: Add or modify the backgroundColor property.

• How to do it: Locate the FloatingActionButton widget.

floatingActionButton: FloatingActionButton(
  onPressed: _incrementCounter,
  backgroundColor: Colors.green, // Change the button color
  child: Icon(Icons.add),
),

• Observation: The floating button’s color changes to green.

6. Add Padding to the Text

Objective: Add space around the text displaying the counter description.

• What to do: Wrap the Text widget in a Padding widget.

• How to do it: Locate the Text widget and wrap it in a Padding widget.

Padding(
  padding: const EdgeInsets.all(16.0),
  child: Text('You have pushed the button this many times:'),
),

• Observation: The text appears less cramped and has space around it.

7. Change the Increment Value

Objective: Increase the counter by a custom value (e.g., 2 or 5) when the button is pressed.

• What to do: Modify the _incrementCounter method.

• How to do it: Locate the _incrementCounter function in MyHomePage.

void _incrementCounter() {
  setState(() {
    _counter += 2; // Increment by 2 instead of 1
  });
}

• Observation: The counter increases by the new value each time the button is clicked.

8. Change the FloatingActionButton Position

Objective: Move the floating button to a different location on the screen.

• What to do: Modify the floatingActionButtonLocation property in Scaffold.

• How to do it: Add or edit the floatingActionButtonLocation property.

floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, // Change position

• Observation: The floating button appears at the bottom center instead of the bottom-right corner.

9. Experiment with Themes

Objective: Change the app's primary color or theme.

• What to do: Modify the theme property of the MaterialApp.

• How to do it: Locate the MaterialApp widget and add a theme property.

theme: ThemeData(
  primarySwatch: Colors.purple, // Change the primary color
),

• Observation: The app’s color scheme, including the AppBar, changes.

10. Create a Custom Button

Objective: Add a custom button that resets the counter.

• What to do: Add a new button to the Scaffold body.

• How to do it: Use a TextButton and write a new function to reset the counter.

Text('$_counter',style: Theme.of(context).textTheme.headline4,), 

// after the Text widget place the new TextButton widget
TextButton(
  onPressed: () {
    setState(() {
      _counter = 0; // Reset counter
    });
  },
  child: Text('Reset Counter'),
),

• Observation: A new button appears, and clicking it resets the counter to 0.

These exercises are beginner-friendly and will help you build confidence with Flutter. Experiment, tweak the code, and observe the changes in real-time!