Changing Screen Color on Tap — My Flutter Learning Journey

#flutter #beginners #ui #tutorial

As part of my Flutter learning journey, I explored how to handle state and user interaction using StatefulWidget and setState().

Today, I built a small app that changes the background color when the screen is tapped — red to green and back again.

💡 What I Learned

How to use a StatefulWidget to store and update data that affects the UI.

How to use setState() to rebuild widgets when something changes.

How to detect user actions using GestureDetector.

🧩 The Code
import 'package:flutter/material.dart';

void main() => runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: const homePage(),
),
);

class homePage extends StatefulWidget {
const homePage({super.key});

@override
State createState() => __myHomePage();
}

class __myHomePage extends State {
bool isTaped = true;

@override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
onTap: () {
print('User tapped');
setState(() {
isTaped = !isTaped;
});
},
child: Container(
color: getColor(),
width: double.infinity,
height: double.infinity,
),
),
);
}

Color getColor() {
return isTaped ? Colors.red : Colors.green;
}
}

🎯 What’s Next

Next, I plan to:

Add a smooth color animation transition.

Display text like “Tapped!” when the color changes.

Continue mastering StatefulWidget before moving to more advanced Flutter concepts.

💬 Final Thought

Every line of code is a step forward.
Flutter is fun because you can see your progress on screen.
Even small projects like this teach you how UI, state, and logic work together.

If you enjoyed this, follow my journey as I keep learning Flutter and Firebase step-by-step!