Building an Eco-Challenges App with Flutter | Flutter App Development Tutorial
Dart Code:
import 'package:flutter/material.dart';
void main() {
runApp(EcoChallengesApp());
}
class EcoChallengesApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Eco-Challenges App',
theme: ThemeData(
primarySwatch: Colors.green,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: EcoChallengesHomePage(),
);
}
}
class EcoChallengesHomePage extends StatefulWidget {
@override
_EcoChallengesHomePageState createState() => _EcoChallengesHomePageState();
}
class _EcoChallengesHomePageState extends State<EcoChallengesHomePage> {
// Dummy data for challenges
List<String> challenges = [
'Reduce plastic usage',
'Conserve water',
'Utilize renewable energy sources',
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Eco-Challenges'),
),
body: ListView.builder(
itemCount: challenges.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(challenges[index]),
trailing: Icon(Icons.arrow_forward),
onTap: () {
// Navigate to challenge details page
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ChallengeDetailsPage(challenge: challenges[index]),
),
);
},
);
},
),
);
}
}
class ChallengeDetailsPage extends StatefulWidget {
final String challenge;
ChallengeDetailsPage({required this.challenge});
@override
_ChallengeDetailsPageState createState() => _ChallengeDetailsPageState();
}
class _ChallengeDetailsPageState extends State<ChallengeDetailsPage> {
int yesCount = 0;
int noCount = 0;
@override
Widget build(BuildContext context) {
double percentage = yesCount / (yesCount + noCount);
return Scaffold(
appBar: AppBar(
title: Text('Challenge Details'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Challenge: ${widget.challenge}',
style: TextStyle(fontSize: 20.0),
),
SizedBox(height: 20.0),
Text(
'Track your progress and earn rewards for completing this challenge!',
textAlign: TextAlign.center,
),
SizedBox(height: 20.0),
CircularProgressWithCount(percentage: percentage),
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: () {
setState(() {
yesCount++;
});
},
child: Text('Yes'),
),
ElevatedButton(
onPressed: () {
setState(() {
noCount++;
});
},
child: Text('No'),
),
],
),
],
),
),
);
}
}
class CircularProgressWithCount extends StatelessWidget {
final double percentage;
CircularProgressWithCount({required this.percentage});
@override
Widget build(BuildContext context) {
return Container(
height: 150,
width: 150,
child: CustomPaint(
painter: CircularProgressPainter(percentage: percentage),
),
);
}
}
class CircularProgressPainter extends CustomPainter {
final double percentage;
CircularProgressPainter({required this.percentage});
@override
void paint(Canvas canvas, Size size) {
final centerX = size.width / 2;
final centerY = size.height / 2;
final radius = size.width / 2;
final paint = Paint()
..color = Colors.blue
..style = PaintingStyle.stroke
..strokeWidth = 10;
// Draw complete progress
canvas.drawCircle(Offset(centerX, centerY), radius, paint);
final whitePaint = Paint()
..color = Colors.white
..style = PaintingStyle.stroke
..strokeWidth = 10;
// Draw remaining progress (white color representing No)
canvas.drawArc(
Rect.fromCircle(center: Offset(centerX, centerY), radius: radius),
-90 * (3.14 / 180),
2 * 3.14 * (1 - percentage),
false,
whitePaint,
);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
Discription:
In this Flutter app development tutorial, we'll build an Eco-Challenges App that encourages users to participate in eco-friendly activities. With Flutter's UI toolkit, we'll create a dynamic app where users can explore various eco-challenges and track their progress. The app features: A homepage listing eco-challenges like reducing plastic usage, conserving water, and utilizing renewable energy sources. Detailed challenge pages showing progress tracking and user engagement. Interactive UI elements for users to update their progress with 'Yes' or 'No' responses. Customized circular progress indicators dynamically reflecting the completion status of each challenge. By the end of this tutorial, you'll gain insights into building engaging Flutter applications while promoting environmental awareness and sustainable living practices. Featuers: Introduction to the Eco-Challenges App Setting up the Flutter environment Creating the homepage with a list of eco-challenges Implementing navigation to challenge details page Designing the challenge details page with progress tracking Building interactive UI elements for user engagement Customizing circular progress indicators Final touches and app overview Conclusion and next steps Navigation between screens. Dynamic list rendering. State management for user interaction. Custom widgets for visualizing progress. Material Design adherence for UI styling. Dynamic data handling. Responsive UI design. Theming for consistent aesthetics. These features enable building a functional Flutter app for tracking eco-challenges with engaging user experiences. Stay tuned for more Flutter tutorials and don't forget to like, share, and subscribe for further updates on Flutter app development and UI design! #Flutter #AppDevelopment #UIUX #SustainableLiving #FlutterTutorial #OpenAI This Flutter code demonstrates the development of an Eco-Challenges App, designed to promote environmental awareness and encourage users to engage in eco-friendly activities. Let's dive into its components and functionalities: The main() function initializes the app by calling runApp() with an instance of EcoChallengesApp, which is the root widget of the application. EcoChallengesApp is a StatelessWidget responsible for setting up the overall theme of the app using MaterialApp. It configures the app's title, theme data, and sets the home screen to EcoChallengesHomePage. EcoChallengesHomePage is a StatefulWidget representing the home screen of the app. It displays a list of eco-challenges using a ListView.builder(), where each challenge is represented by a ListTile. Tapping on a challenge navigates the user to its details page. The ChallengeDetailsPage widget is a StatefulWidget that displays detailed information about a specific eco-challenge. It includes the challenge title, a description, a circular progress indicator, and buttons to track user engagement. The circular progress indicator is a custom widget named CircularProgressWithCount, which takes a percentage value to represent the progress of the challenge. It utilizes a CustomPaint widget to draw the circular progress bar. CircularProgressPainter is a custom painter responsible for drawing the circular progress indicator. It takes the percentage value and draws two arcs: one representing completed progress (in blue) and the other representing remaining progress (in white). The UI allows users to track their engagement with a challenge by tapping 'Yes' or 'No' buttons. Each tap updates the corresponding count and recalculates the progress percentage, triggering a UI refresh. The app follows the Material Design guidelines, providing a consistent and intuitive user experience across different devices and screen sizes. This code serves as a foundation for building a fully functional Eco-Challenges App, where users can explore, engage with, and track their progress in various eco-friendly activities. By leveraging Flutter's powerful UI toolkit and navigation system, developers can create engaging mobile applications with rich user interfaces and seamless user experiences. Overall, this Flutter code demonstrates the potential of mobile app development in promoting environmental consciousness and encouraging sustainable practices among users. This tutorial provides insights into Flutter app development, UI design principles, and custom widget creation, empowering developers to create impactful applications that address real-world challenges and promote positive social change. Tags: #Flutter #FlutterApp #MobileAppDevelopment #UIUX #SustainableLiving #Environment #EcoFriendly #GreenTech #Technology #CodingTutorial #Programming #OpenSource #AppDevelopment #SoftwareDevelopment #FlutterTutorial #UIDesign #UserExperience #MobileDevelopment #TechTutorial #ProgrammingTutorial
Comments
Post a Comment