Installing Flutter
Download Flutter SDK:
Go to the Flutter website and download the Flutter SDK for your operating system.
Install Flutter SDK:
Extract the downloaded file and add the flutter/bin path to your operating system’s PATH variable.
Verify the installation:
Open Terminal or Command Prompt and run the command:
flutter doctor
This command will show you the Flutter installation status and required components like Android Studio, Xcode, etc.
Setting up an IDE
Download and install VS Code or Android Studio:
You can use Visual Studio Code or Android Studio to develop your Flutter apps.
Install Flutter and Dart plugins:
For VS Code: Go to Extensions and search for “Flutter” and “Dart” and click on Install.
For Android Studio: Go to Preferences > Plugins and search for “Flutter” and “Dart” and click on Install.
Creating the First Flutter Project
Open Terminal or Command Prompt and run the command:
flutter create my_first_app
Change directory to the created project:
cd my_first_app
Open the created project in VS Code or Android Studio
Running the Flutter App
Connect the Device:
Connect your Android or iOS device to your computer or use an Emulator/Simulator
Run the App:
In Terminal or Command Prompt, run the command:
flutter run
Developing and Customizing the App
Write the code in the file lib/main.dart:
Add dependency in pubspec.yaml file
Add dependency for http in pubspec.yaml file:
dependencies:
flutter:
sdk: flutter
http: ^0.13.3
Then run flutter pub get command to download the library
flutter pub get
flutter pub get
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Good Morning App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
String greeting = 'Hello';
String weather = 'Fetching...';
@override
void initState() {
super.initState();
fetchWeather();
}
Future<void> fetchWeather() async {
final response = await http.get(Uri.parse('https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=Bangkok'));
if (response.statusCode == 200) {
final data = json.decode(response.body);
setState(() {
weather = data['current']['condition']['text'];
});
} else {
setState(() {
weather = 'Unable to fetch data';
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Good Morning App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
greeting,
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20),
Text(
'Today $weather',
style: TextStyle(fontSize: 24),
),
],
),
),
);
}
}
In this code:
Use the http library to fetch data from the weather API
Use the fetchWeather function to fetch weather data from the API and update the UI
Don’t forget to change YOUR_API_KEY to your API Key from the weather API service you choose
I hope that anyone who is studying will get a sentence from this article. Have fun learning in the world of technology. As technology continues to develop, you too must develop into a professional.