DeveloperBreeze

Tutorials Programming Tutorials, Guides & Best Practices

Explore 149+ expertly crafted tutorials tutorials, components, and code examples. Stay productive and build faster with proven implementation strategies and design patterns from DeveloperBreeze.

Building an Advanced Weather App with Flutter and Dart

Tutorial August 12, 2024
dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/weather_provider.dart';

class WeatherScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final weatherProvider = Provider.of<WeatherProvider>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Weather App'),
      ),
      body: Center(
        child: weatherProvider.weather == null
            ? Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Enter City Name',
                    style: TextStyle(fontSize: 24),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: TextField(
                      onSubmitted: (value) {
                        weatherProvider.fetchWeather(value);
                      },
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'City',
                      ),
                    ),
                  ),
                ],
              )
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    weatherProvider.weather!.cityName,
                    style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
                  ),
                  SizedBox(height: 16),
                  Text(
                    '${weatherProvider.weather!.temperature}°C',
                    style: TextStyle(fontSize: 56),
                  ),
                  SizedBox(height: 16),
                  Image.network(
                    'http://openweathermap.org/img/wn/${weatherProvider.weather!.icon}@2x.png',
                  ),
                  SizedBox(height: 16),
                  Text(
                    weatherProvider.weather!.description,
                    style: TextStyle(fontSize: 24),
                  ),
                ],
              ),
      ),
    );
  }
}

Run the app using:

Introduction to Flutter and Dart

Tutorial August 12, 2024
dart

Open the project in your preferred IDE (e.g., Android Studio or VSCode).

  • lib/main.dart: The main entry point for your Flutter application.
  • pubspec.yaml: The configuration file where you specify dependencies.
  • android/ and ios/: Platform-specific code.