wtorek, 14 Sierpień 2018

flutter - build native apps

Flutter – pobieranie danych w formacie JSON

W tym wpisie zapoznamy się jak w prosty sposób pobrać dane w formacie JSON. Dane do naszej aplikacji weźmiemy z rest api, którego opis znajduje się na https://jsonplaceholder.typicode.com/ .

Po wklejeniu poniższego kodu powinniśmy zobaczyć prostą listę z trzema polami, którą później będziemy mogli wzbogacić o następne. W razie potrzeby pod linkiem https://docs.flutter.io/flutter/material/Icons-class.htmlznajduje się lista ikon, którymi możemy zastąpić obecne.



import "package:flutter/material.dart";

void main() => runApp(MyApp());
  

class MyApp extends StatefulWidget {
 MainPage createState() => MainPage();
}


class MainPage extends State {

  final title = "Welcome to Flutter";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: ListView(
          children: [
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text("name"),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text("phone"),
            ),
            ListTile(
              leading: Icon(Icons.email),
              title: Text("email"),
            ),
          ],
        ),
      ),
    );
  }
}

init

Teraz dodamy trochę logiki do naszej aplikacji, dodamy zdarzenie do każdego z pól listy. By poprawnie zaimportować paczkę http-dart musimy dodać zależność http: 0.11.3+16″ do pliku pubspec.yaml a następnie użyć komendy „flutter packages get”, jest to opisane pod następującym linkiem https://pub.dartlang.org/packages/http#-installing-tab-.

Po każdym dotknięciu w dany element listy, zostanie wywołana funkcja getUserData, która dzięki bibliotece http-dart wyślę zapytanie GET a następnie przetworzy odpowiedź w formacie JSON na obiekt Dart przy użyciu paczki dart:convert. Następnie poprzez  setState zaktualizujemy naszą listę przy użyciu pobranych danych.


import "package:flutter/material.dart";
import "dart:async";
import "dart:convert";
import "package:http/http.dart" as http;

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  MainPage createState() => MainPage();
}

class MainPage extends State {

  final title = "Welcome to Flutter";
  var counter = 1;
  var name = "Jones Smith";
  var phone = "200 300 400";
  var email = "jonessmith@gmail.com";

Future getUserData() async {
  var response = await http.get(Uri.encodeFull("https://jsonplaceholder.typicode.com/users/$counter"), headers: {"Accept": "application/json"});

  setState(() {
    var responseUser = json.decode(response.body);
    print(responseUser);
    name = responseUser["name"];
    phone = responseUser["phone"];
    email = responseUser["email"];
    counter++;
    if (counter > 10 ) {
    counter = 1;
  }
  });

  return "Done";
}

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: ListView(
          children: [
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text("$name"),
              onTap: getUserData,
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text("$phone"),
              onTap: getUserData,
            ),
            ListTile(
              leading: Icon(Icons.email),
              title: Text("$email"),
              onTap: getUserData,
            ),
          ],
        ),
      ),
    );
  }
}

list

Na końcu możemy troszkę ostylować naszą aplikację, na pewno warto dokładnie zapoznać się z dokumentacją by zrozumieć w jaki sposób przemyślanie budować layout, świetnie jest to opisane pod następującym linkiem https://flutter.io/tutorials/layout/ . Zmienimy kolor górnego panelu, ikon i trochę tekst w każdym z pól.


import "package:flutter/material.dart";
import "dart:async";
import "dart:convert";
import "package:http/http.dart" as http;

void main() => runApp(MyApp());
  

class MyApp extends StatefulWidget {
 MainPage createState() => MainPage();
}


class MainPage extends State {

  
  final title = "Welcome to Flutter";
  var counter = 1;
  var name = "Jones Smith";
  var phone = "200 300 400";
  var email = "jonessmith@gmail.com";


  Future getUserData() async {
    var response = await http.get(Uri.encodeFull("https://jsonplaceholder.typicode.com/users/$counter"), headers: {"Accept": "application/json"});

    setState(() {
      var responseUser = json.decode(response.body);
      print(responseUser);
      name = responseUser["name"];
      phone = responseUser["phone"];
      email = responseUser["email"];
      counter++;
      if (counter > 10 ) {
        counter = 1;
      }
    });

    return "Done";
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: title,
      theme: ThemeData(
        brightness: Brightness.light,
        primaryColor: Colors.pink,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: ListView(
          children: [
            ListTile(
              leading: Icon(Icons.account_circle, color: Colors.pink),
              title: Text("$name".toUpperCase()),
              onTap: getUserData,
            ),
            ListTile(
              leading: Icon(Icons.phone, color: Colors.pink),
              title: Text("$phone", style: TextStyle(fontStyle: FontStyle.italic)),
              onTap: getUserData,
            ),
            ListTile(
              leading: Icon(Icons.email, color: Colors.pink),
              title: Text("$email", style: TextStyle(fontSize: 20.0)),
              onTap: getUserData,
            ),
          ],
        ),
      ),
    );
  }
}
style
Back to home
Flutter – Nawigacja pomiędzy widokami

Nawigacja pomiędzy widokami we frameworku Flutter.

Read more...
Alternatywne JavaScriptowe Frameworki

W JavaScriptowym świecie poza frameworkami React, Angular które podzieliły po między siebie popularność, a goniącym je Vue.js jest jeszcze miejsce na inne, mniej skompilowane frameworki, które nie zostały jeszcze dostrzeżone przez szersze grono ludzi.

Read more...
Flutter – pobieranie danych w formacie JSON

W tym wpisie zapoznamy się jak w prosty sposób pobrać dane w formacie JSON.

Read more...