czwartek, 30 Sierpień 2018

flutter - build native apps

Flutter – Nawigacja pomiędzy widokami

Na początku stworzymy podstawowy widok naszej aplikacji, będzie się on składał z wyświetlanego tytułu pośrodku ekranu oraz dwóch przycisków służących do nawigacji pomiędzy poszczególnymi widokami, którym nadamy unikatowe efekty przy kliknięciu, osobny kolor dla każdego ekranu. Poniższy kod powinniśmy wstawić do pliku main.dart znajdującego się w folderze lib i uruchamiamy komendę „flutter run”.

 
 


import "package:flutter/material.dart";

  
void main() {
  runApp(MaterialApp(
    title: "Nawigacja",
    home: new Home(),
  ));
}


class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      appBar: AppBar(
        title: new Text("Strona Główna"),
        backgroundColor: Colors.blue
      ),
      body: new Center(
        child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          new Container(
            child: Text("Strona Główna", style: TextStyle(color: Colors.white)),
          ),
          new Container(
            margin: const EdgeInsets.only(top: 10.0),
            child: ButtonTheme(
            minWidth: 200.0,
            child: new RaisedButton(
              child: const Text("Informacje"),
              splashColor: Colors.red,
              onPressed: () {
                 Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Informations()),
                );
              },
            ),
          ),
          ),
          new Container(
            margin: const EdgeInsets.only(top: 10.0),
            child: ButtonTheme(
            minWidth: 200.0,
            child: new RaisedButton(
              child: const Text("Kontakt"),
              splashColor: Colors.green,
              onPressed: () {
                 Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Contact()),
                );
              },
            ),
          ),
          ),   
        ],
        ),
      ),
    );
  }
}

Podstawowy, ustawiony przez nas widok, przy uruchomieniu aplikacji to „Home”, podstawowym kolorem dla tego widoku będzie niebieski.


void main() {
  runApp(MaterialApp(
    title: "Nawigacja",
    home: new Home(),
  ));
}

Główne elementy widoczne na ekranie, znajdują się w „children”, dzięki temu, że używamy „children” zamiast „child”, możemy zawrzeć wiele elementów podczas zagnieżdżania elementów naszego widoku. Każdy z przycisków, otrzymuje minimalną szerokość, warto zwrócić uwagę, że wartości powinniśmy podawać z kropką, dla przykładu 200.0 zamiast 200, właściwość splashColor odpowiada za kolor efektu występującego po kliknięciu w przycisk, w funkcji onPressed dodamy kod, który pozwoli nam przechodzić pomiędzy interesującymi nas widokami.


children: [
  new Container(
    child: Text("Strona Główna", style: TextStyle(color: Colors.white)),
  ),
  new Container(
    margin: const EdgeInsets.only(top: 10.0),
    child: ButtonTheme(
    minWidth: 200.0,
    child: new RaisedButton(
      child: const Text("Strona Główna"),
      splashColor: Colors.blue,
      onPressed: () {
      },
    ),
  ),
  ),
  new Container(
    margin: const EdgeInsets.only(top: 10.0),
    child: ButtonTheme(
    minWidth: 200.0,
    child: new RaisedButton(
      child: const Text("Informacje"),
      splashColor: Colors.red,
      onPressed: () {
      },
    ),
  ),
  ),
  new Container(
    margin: const EdgeInsets.only(top: 10.0),
    child: ButtonTheme(
    minWidth: 200.0,
    child: new RaisedButton(
      child: const Text("Kontakt"),
      splashColor: Colors.green,
      onPressed: () {
      },
    ),
  ),
  ),   
],
        

theme

Dodamy teraz dwa nowe widoki, informacje i kontakt. W tym celu tworzymy dwie nowe klasy „Informations” i „Contact”, możemy skopiować naszą klasę Home i samodzielnie zmienić nowym widokom tekst w tytule i podstawowy kolor tła.


class Informations extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      appBar: AppBar(
        title: new Text("Informacje"),
        backgroundColor: Colors.red
      ),
      body: new Center(
        child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          new Container(
            child: Text("Informacje", style: TextStyle(color: Colors.white)),
          ),
          new Container(
            margin: const EdgeInsets.only(top: 10.0),
            child: ButtonTheme(
            minWidth: 200.0,
            child: new RaisedButton(
              child: const Text("Strona Główna"),
              splashColor: Colors.blue,
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Home()),
                );
              },
            ),
          ),
          ),
          new Container(
            margin: const EdgeInsets.only(top: 10.0),
            child: ButtonTheme(
            minWidth: 200.0,
            child: new RaisedButton(
              child: const Text("Kontakt"),
              splashColor: Colors.green,
              onPressed: () {
                 Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Contact()),
                );
              },
            ),
          ),
          ),   
        ],
        ),
      ),
    );
  }
}

class Contact extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green,
      appBar: AppBar(
        title: new Text("Kontakt"),
        backgroundColor: Colors.green
      ),
      body: new Center(
        child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          new Container(
            child: Text("Kontakt", style: TextStyle(color: Colors.white)),
          ),
          new Container(
            margin: const EdgeInsets.only(top: 10.0),
            child: ButtonTheme(
            minWidth: 200.0,
            child: new RaisedButton(
              child: const Text("Strona Główna"),
              splashColor: Colors.blue,
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Home()),
                );
              },
            ),
          ),
          ),
          new Container(
            margin: const EdgeInsets.only(top: 10.0),
            child: ButtonTheme(
            minWidth: 200.0,
            child: new RaisedButton(
              child: const Text("Informacje"),
              splashColor: Colors.red,
              onPressed: () {
                 Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Informations()),
                );
              },
            ),
          ),
          ),
        ],
        ),
      ),
    );
  }
}

Dzięki metodzie Navigator.push użytej w zdarzeniu onPressed przypisanym do przycisku, możemy ustalić do jakiego screenu powinno nas przenieść po jego kliknięciu

theme

theme

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...