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
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...
Flutter – nowe narzędzie do tworzenia mobilnych aplikacji

Flutter to nowy framework stworzony przez Google do tworzenia mobilnych aplikacji na systemy iOS czy Android, za pomocą języka Dart. Język ten możemy wykorzystać przy tworzeniu webowych aplikacji na przykład przy pomocy frameworku AngularDart czy do wspomnianych aplikacji mobilnych.

Read more...