środa, 8 Sierpień 2018

flutter - build native apps

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. Na pewno warto poświęcić mu niego uwagi choćby na zbliżający się powoli system operacyjny Fuchsia.

Jakie są zalety języka Dart.

  • łatwy dla osób, które miały wcześniej styczność z językiem Java
  • wsparcie dla asynchronicznych operacji
  • podstawowe biblioteki zawierają dużo podstawowych funkcjonalności
  • skompilowany do kodu JavaScript działa we wszystkich przeglądarkach
  • dobre narzędzia do tworzenia aplikacji
  • może być skompilowany do natywnego kodu mobilnych platform iOS lub Android (flutter)

Flutter charakteryzuje się świetnym procesem tworzenia aplikacji, hot reload działa w tym przypadku doskonale, w mgnieniu oka możemy dostrzec wprowadzone przez nas zmiany na ekranie naszych telefonów. Znajdziemy w nim wiele wbudowanych widżetów, podzielonych na dwie sekcje, Material Design dla Androida, a także Cupertino dla iOS. Największą zaletą jest fakt, że Flutter działa szybko, jest kompilowany do natywnego kodu. Dokumentacja jest świetna, zawiera tutoriale i pełno dobrze opisanych przykładów jak możemy skorzystać z danej funkcji.

Poniżej prosta aplikacja, która pozwoli odwrócić kolejność znaków w naszym wyrazie.

Na początku po stworzeniu nowego projektu i zastąpieniu kodu w lib/main.dart powinniśmy ujrzeć widok z obrazka poniżej.


import "package:flutter/material.dart";

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

class MyApp extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Welcome to Flutter',
        home: Scaffold(
        appBar: AppBar(
        title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),  
      ),
    );
  }
}

hello world

Następnie zmienimy trochę kolory. Listę kolorów możemy znaleźć na https://docs.flutter.io/flutter/material/Colors-class.html
 


import "package:flutter/material.dart";

void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', theme: ThemeData( brightness: Brightness.dark, primaryColor: Colors.tealAccent, ), home: Scaffold( appBar: AppBar( title: Text('Welcome to Flutter'), ), body: Center( child: Text('Hello World'), ), ), ); } }

theme

W tym momencie dodajemy naszą funkcjonalność, po naciśnięciu przycisku kolejność znaków w słowie zostanie zmieniona.
 


import "package:flutter/material.dart";
void main() => runApp(MyApp());

String _word = "Hello World";

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

class MainPage extends State {

void reverseWord() {
  setState(() => _word = _word.split("").reversed.join());
}

  @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: "Welcome to Flutter",
        theme: ThemeData(
          brightness: Brightness.dark,
          primaryColor: Colors.tealAccent,
        ),
        home: Scaffold(
          appBar: AppBar(
          title: Text("Welcome to Flutter"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('$_word'),
              RaisedButton(
                child: Text("Reverse Word"),
                onPressed: reverseWord,
              )
            ]
          )
        )
      ),
    );
  }
}

theme

Stworzyliśmy prostą aplikację używając prostego i czytelnego kodu, warto przeglądnąć dokumentacje https://flutter.io/docs/ i spróbować samemu dodać naszej aplikacji nowe funkcjonalności.

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