Spausdinti puslapį - Flutter: JSON ir API Sąvokos

Pavadinimas: Flutter: JSON ir API Sąvokos – Išsamus Vadovas
Parašė: Gozge raytas Mar 30, 2025, 12:27 PM

Flutter yra populiarus Google sukurtas įrankis, skirtas kurti gražias ir funkcionalias mobiliąsias programas. Vienas iš pagrindinių Flutter privalumų – lengvas darbas su JSON duomenimis ir API integracija. Šiame straipsnyje aptarsime, kas yra JSON ir API, kaip juos naudoti Flutter projektuose, ir pateiksime praktinius pavyzdžius. Turinys pritaikytas SEO reikalavimams ir orientuotas į raktinius žodžius, tokius kaip ,,Flutter JSON", ,,Flutter API integracija" ir ,,Flutter kodų pavyzdžiai".

Kas yra JSON ir API?

JSON (JavaScript Object Notation): Lengvas duomenų formatas, naudojamas struktūrizuotai informacijai perduoti tarp serverio ir kliento. JSON yra lengvai skaitomas ir dažnai naudojamas API atsakymams.
API (Application Programming Interface): Sąsaja, leidžianti programoms bendrauti tarpusavyje. Flutter programoje API dažniausiai naudojamas duomenims iš serverio gauti ar siųsti.

Flutter ir JSON: Kaip Tai Veikia?
Flutter programoje JSON duomenys dažniausiai gaunami iš API ir paverčiami Dart objektais. Tam naudojama dart:convert biblioteka ir http paketas API užklausoms.

1 žingsnis: Priklausomybės pridėjimas
Failo pubspec.yaml pridėkite šią eilutę:

Kodas [Pasirinkti]

dependencies:
  http: ^1.1.0

2 žingsnis: Paprastas JSON Apdorojimas
Tarkime, turime JSON struktūrą:

Kodas [Pasirinkti]

{
  "id": 1,
  "vardas": "Jonas",
  "amžius": 30
}

Pavyzdys, kaip ją apdoroti Flutter programoje:

Kodas [Pasirinkti]

import 'dart:convert';
import 'package:http/http.dart' as http;

void main() async {
  final url = Uri.parse('https://api.example.com/vartotojas');
  final atsakymas = await http.get(url);
  
  if (atsakymas.statusCode == 200) {
    final jsonDuomenys = jsonDecode(atsakymas.body);
    print('Vardas: ${jsonDuomenys['vardas']}'); // Rezultatas: Vardas: Jonas
    print('Amžius: ${jsonDuomenys['amžius']}'); // Rezultatas: Amžius: 30
  } else {
    print('Klaida: ${atsakymas.statusCode}');
  }
}

Šiame pavyzdyje jsonDecode paverčia JSON eilutę į Dart Map objektą.

API Integracija Flutter Programoje
Norint dirbti su API, reikia atlikti šiuos veiksmus:

Sukurti modelį duomenims struktūrizuoti.
Gauti duomenis iš API.
Atvaizduoti juos vartotojo sąsajoje.

Pavyzdys: API Duomenų Gavimas ir Atvaizdavimas
Tarkime, API grąžina vartotojų sąrašą:

Kodas [Pasirinkti]

[
  {"id": 1, "vardas": "Jonas", "amžius": 30},
  {"id": 2, "vardas": "Rasa", "amžius": 25}
]

1. Modelio Klasė

Kodas [Pasirinkti]

class Vartotojas {
  final int id;
  final String vardas;
  final int amzius;

  Vartotojas({required this.id, required this.vardas, required this.amzius});

  factory Vartotojas.isJson(Map<String, dynamic> json) {
    return Vartotojas(
      id: json['id'],
      vardas: json['vardas'],
      amzius: json['amžius'],
    );
  }
}

2. API Užklausa

Kodas [Pasirinkti]

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<List<Vartotojas>> gautiVartotojus() async {
  final url = Uri.parse('https://api.example.com/vartotojai');
  final atsakymas = await http.get(url);

  if (atsakymas.statusCode == 200) {
    List jsonDuomenys = jsonDecode(atsakymas.body);
    return jsonDuomenys.map((json) => Vartotojas.isJson(json)).toList();
  } else {
    throw Exception('Nepavyko gauti duomenų');
  }
}

3. Duomenų Atvaizdavimas

Kodas [Pasirinkti]

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VartotojuSarasas(),
    );
  }
}

class VartotojuSarasas extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Vartotojų Sąrašas')),
      body: FutureBuilder<List<Vartotojas>>(
        future: gautiVartotojus(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                final vartotojas = snapshot.data![index];
                return ListTile(
                  title: Text(vartotojas.vardas),
                  subtitle: Text('Amžius: ${vartotojas.amzius}'),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Text('Klaida: ${snapshot.error}');
          }
          return CircularProgressIndicator();
        },
      ),
    );
  }
}

Šiame pavyzdyje FutureBuilder naudojamas duomenų gavimui ir atvaizdavimui realiuoju laiku.

Kodėl JSON ir API Svarbūs Flutter?

Dinamiškumas: API leidžia gauti naujausius duomenis iš serverio.
Struktūra: JSON palengvina sudėtingų duomenų apdorojimą.
Universalumas: Šie įrankiai veikia su dauguma šiuolaikinių technologijų.

Išvada
Flutter darbas su JSON ir API yra esminė įgūdis kuriant funkcionalias programas. Naudodami pateiktus pavyzdžius, galite lengvai integruoti išorinius duomenis į savo Flutter projektus. Jei norite daugiau informacijos ar sudėtingesnių pavyzdžių, klauskite!

Skaitmeninis Pasaulis | Programinės Įrangos Paviljonas

Programinės įrangos vadovėliai => Flutter => Temą pradėjo: Gozge raytas Mar 30, 2025, 12:27 PM