Category: Examples

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&amp;apiKey=YOUR_API_KEY'));
if (response.statusCode == 200) {
  setState(() {
    _articles = json.decode(response.body)&#91;'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&#91;index];
            return Card(
              child: ListTile(
                title: Text(article&#91;'title']),
                subtitle: Text(article&#91;'description'] ?? ''),
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => ArticleDetail(url: article&#91;'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'),
  ),
);
  }
}

This example demonstrates state management and using a ListView to display a list of items.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
return MaterialApp(
  title: 'To-Do List',
  theme: ThemeData(primarySwatch: Colors.blue),
  home: ToDoList(),
);
  }
}

class ToDoList extends StatefulWidget {
  @override
  _ToDoListState createState() => _ToDoListState();
}

class _ToDoListState extends State<ToDoList> {
  final List<String> _tasks = [];
  final TextEditingController _controller = TextEditingController();

  void _addTask() {
if (_controller.text.isNotEmpty) {
  setState(() {
    _tasks.add(_controller.text);
    _controller.clear();
  });
}
  }

  void _removeTask(int index) {
setState(() {
  _tasks.removeAt(index);
});
  }

  @override
  Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text('To-Do List'),
  ),
  body: Column(
    children: &#91;
      Expanded(
        child: ListView.builder(
          itemCount: _tasks.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(_tasks&#91;index]),
              trailing: IconButton(
                icon: Icon(Icons.delete),
                onPressed: () => _removeTask(index),
              ),
            );
          },
        ),
      ),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          children: &#91;
            Expanded(
              child: TextField(
                controller: _controller,
                decoration: InputDecoration(labelText: 'New Task'),
              ),
            ),
            IconButton(
              icon: Icon(Icons.add),
              onPressed: _addTask,
            ),
          ],
        ),
      ),
    ],
  ),
);
  }
}