Цены с помощью NumberFormat
Часть раздела Данные и сеть путешествия по Flutter на Coddy. Урок 22 из 27.
Цены поступают с серверов в виде обычных чисел: 7.5, 12.25. Если поместить 7.5 в строку, получится $7.5, а такую цену не напечатает ни один магазин. В цене должны быть знак валюты и ровно два знака после запятой.
NumberFormat.currency из того же пакета intl делает и то и другое:
final price = NumberFormat.currency(symbol: '\$');
price.format(7.5) // $7.50
price.format(1250) // $1,250.00Он добавляет знак, всегда выводит два знака после запятой и ставит запятые между разрядами тысяч. symbol — это знак, который нужно вывести. Без него вместо знака выводится код валюты: USD7.50.
Перед знаком $ стоит обратная косая черта: '\$', потому что в строке Dart $ начинает имя переменной. Обратная косая черта означает: «обычный знак доллара».
Задание
ЛегкоЦены на книги отображаются как $7.5. Отформатируй каждую цену с помощью NumberFormat.currency(symbol: '\$'), чтобы они отображались как $8.99, $7.50 и $12.25.
Попробуйте сами
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'api.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: BooksScreen(),
);
}
}
class BooksScreen extends StatefulWidget {
const BooksScreen({super.key});
@override
State<BooksScreen> createState() => _BooksScreenState();
}
class _BooksScreenState extends State<BooksScreen> {
late Future<List<Book>> _books;
@override
void initState() {
super.initState();
_books = loadBooks();
}
Future<List<Book>> loadBooks() async {
final body = await fetch('/books');
final items = jsonDecode(body) as List<dynamic>;
return items.map((item) => Book.fromJson(item as Map<String, dynamic>)).toList();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Books')),
body: FutureBuilder<List<Book>>(
future: _books,
builder: (context, snapshot) {
if (snapshot.hasError) {
return Center(child: Text('Could not load: ${snapshot.error}'));
}
if (snapshot.hasData) {
final books = snapshot.data!;
return ListView.builder(
itemCount: books.length,
itemBuilder: (context, index) {
final book = books[index];
return ListTile(
title: Text(book.title),
subtitle: Text(book.author),
trailing: Text(
'\$${book.price}',
style: const TextStyle(fontSize: 18),
),
);
},
);
}
return const Center(child: CircularProgressIndicator());
},
),
);
}
}
class Book {
Book({required this.title, required this.author, required this.price});
final String title;
final String author;
final double price;
factory Book.fromJson(Map<String, dynamic> json) {
return Book(
title: json['title'] as String,
author: json['author'] as String,
price: json['price'] as double,
);
}
}
В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Данные и сеть
1Future (асинхронные результаты)
Значение, которое появится позжеОжидание с async и awaitФункции, возвращающие FutureПрактический API Coddy3Когда вызовы завершаются ошибкой
Перехват ошибок с помощью tryВыбрасывание ошибкиОчистка с помощью finallyСостояние ошибки в FutureBuilderКнопка «Попробовать снова»Потренируйтесь самостоятельно: Онлайн-компилятор Flutter