Вот несколько примеров приложений Flutter вместе с фрагментами кода, которые дадут вам представление о различных методах и функциях:
- Приложение-счетчик.
Это простое приложение, которое подсчитывает количество нажатий кнопки.
import 'package:flutter/material.dart';
void main() {
runApp(CounterApp());
}
class CounterApp extends StatefulWidget {
@override
_CounterAppState createState() => _CounterAppState();
}
class _CounterAppState extends State<CounterApp> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Counter App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Counter Value:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
),
);
}
}
- Приложение «Погода».
В этом примере показано, как получить данные о погоде из API и отобразить их в приложении.
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() {
runApp(WeatherApp());
}
class WeatherApp extends StatefulWidget {
@override
_WeatherAppState createState() => _WeatherAppState();
}
class _WeatherAppState extends State<WeatherApp> {
var temperature = '';
var city = '';
Future<void> getWeatherData() async {
var response = await http.get(Uri.parse(
'https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY'));
var result = jsonDecode(response.body);
setState(() {
temperature = result['main']['temp'].toString();
city = result['name'];
});
}
@override
void initState() {
super.initState();
getWeatherData();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Weather App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'City: $city',
),
SizedBox(height: 20),
Text(
'Temperature: $temperature',
),
],
),
),
),
);
}
}
- Приложение «Список дел».
В этом примере показано, как создать приложение со списком дел с возможностью добавления и удаления элементов.
import 'package:flutter/material.dart';
void main() {
runApp(TodoApp());
}
class TodoApp extends StatefulWidget {
@override
_TodoAppState createState() => _TodoAppState();
}
class _TodoAppState extends State<TodoApp> {
List<String> _todoList = [];
TextEditingController _textEditingController = TextEditingController();
void _addTodoItem() {
setState(() {
_todoList.add(_textEditingController.text);
_textEditingController.clear();
});
}
void _removeTodoItem(int index) {
setState(() {
_todoList.removeAt(index);
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Todo List App'),
),
body: Column(
children: <Widget>[
TextField(
controller: _textEditingController,
decoration: InputDecoration(
labelText: 'Enter a task',
),
),
ElevatedButton(
onPressed: _addTodoItem,
child: Text('Add Task'),
),
Expanded(
child: ListView.builder(
itemCount: _todoList.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(_todoList[index]),
trailing: IconButton(
icon: Icon(Icons.delete),
onPressed: () => _removeTodoItem(index),
),
);
},
),
),
],
),
),
);
}
}
Это всего лишь несколько примеров приложений Flutter, каждое из которых демонстрирует разные функциональные возможности. Не забудьте заменить 'YOUR_API_KEY'
в примере приложения Weather на ваш фактический ключ API.