This example shows how to fetch data from an API and display it in a list format.
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: 'News App',
theme: ThemeData(primarySwatch: Colors.blue),
home: NewsList(),
);
}
}
class NewsList extends StatefulWidget {
@override
_NewsListState createState() => _NewsListState();
}
class _NewsListState extends State<NewsList> {
List _articles = [];
bool _loading = true;
@override
void initState() {
super.initState();
_fetchNews();
}
Future<void> _fetchNews() async {
final response = await http.get(Uri.parse('https://newsapi.org/v2/top-headlines?country=us&apiKey=YOUR_API_KEY'));
if (response.statusCode == 200) {
setState(() {
_articles = json.decode(response.body)['articles'];
_loading = false;
});
} else {
throw Exception('Failed to load news');
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('News App'),
),
body: _loading
? Center(child: CircularProgressIndicator())
: ListView.builder(
itemCount: _articles.length,
itemBuilder: (context, index) {
final article = _articles[index];
return Card(
child: ListTile(
title: Text(article['title']),
subtitle: Text(article['description'] ?? ''),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ArticleDetail(url: article['url']),
),
);
},
),
);
},
),
);
}
}
class ArticleDetail extends StatelessWidget {
final String url;
ArticleDetail({required this.url});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Article')),
body: Center(
child: Text('Open URL: $url'),
),
);
}
}
Leave a Reply