Fintechモバイルアプリを作成することでフラッタを学ぶ-レッスン1 :ログインフォーム

23675 ワード
tutorial flutter beginners dart テキストリンク
この記事はもともと1967年に出版されましたhttps://www.blog.duomly.com/flutter-course-building-a-fintech-mobile-app-lesson-1-login-form

フラッターコース入門


フラッターは、DARTプログラミング言語を使用してAndroidとIOSのモバイルアプリケーションを構築するためのフレームワークです.フラッターは、Googleの開発者によって行われた今、それは反応ネイティブの主要なライバルです.
フロントエンドの開発者として、私はすでにネイティブの反応で働いています、そして、私はそれがどのように働くかという考えを持っています、しかし、フラッターは私が発見したい神秘でした.それで、私はしました、そして、今日、私はそれがクールなフラッタである方法をあなたに示したいです、そして、それがこのツールで働くことはどれくらい快適です.
この記事はフラッターコースの最初のレッスンです.コースの間、我々はFintechモバイルアプリを構築するつもりですAngular Course .
もちろん、私はゴングバックエンドを使用しますGolang Course , ので、同様にそれを構築する自由を感じる.
そしてもちろん、いつものように、私はあなたのためにこのレッスンのビデオバージョンを持っている.
もう一つのことがあります.我々はここですべての環境を設定するつもりはないので、見て自由にofficial Flutter documentation すべてをインストールするには、プロジェクトの開発を開始する必要があります.
始めましょう.

1 .アプリケーションの作成と実行


我々はアプリケーションを設定を開始する前に、我々は我々が開発中に我々のアプリで行われた変更を見ているシミュレータを開く必要があります.私はiOS開発のためのXcodeを使用して、私のシミュレータは、iPhone 8とiPhone 8プラスです.
次のコマンドでシミュレータを開きます.
open -a Simulator
シミュレータが動作している場合は、コンソールでプロジェクトのフォルダーを開き、次のコマンドを使用して新しいアプリケーションを作成します.
flutter create fintech_app_dev
新しいプロジェクトの作成は、数秒かかることがありますが、それが完了したら、新しく作成されたプロジェクトフォルダに移動し、我々は、アプリケーションを実行することができますし、シミュレータでそれを参照してください.
cd fintech_app_dev
flutter run
次に、あなたのシミュレータでアプリケーションを見ることができるはずです.お気に入りのコードエディターでコードを開きましょう.

メイン。ダート


さて、フラッタプロジェクトのファイル構造を見ることができます.メインフォルダはlib , そして、そのフォルダの中で、我々は我々のスクリーンと装置をつくるつもりです.また、そこにすべてが発生するアプリケーションのメインファイルを見つけることができます.main.dart .
そのファイルを開きましょう.
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Text('Title'),
    );
  }
}
準備ができたら、次のステップに進みましょう.

3 .ウェルカム画面を作成する


インサイドlib フォルダを作成しますscreens ここで我々は画面を持つフォルダを作成する予定です.新しく作られたscreens , 別のものを作るwelcome . つくりましょうwelcome.dart ファイルをそこに置いて、ログインフォームのコンテナを作りましょう.
import 'package:flutter/material.dart';

class Welcome extends StatefulWidget {
  Welcome({Key key}) : super(key: key);

  @override
  _WelcomeState createState() => _WelcomeState();
}

class _WelcomeState extends State<Welcome> {
  @override
  Widget build(BuildContext context) {
    final _screenSize = MediaQuery.of(context).size;

    return Scaffold(
        backgroundColor: Color(0xFF4A148C),
        body: Center(
            child: Container(
                margin: const EdgeInsets.all(20.0),
                color: Colors.white,
                height: _screenSize.height * 0.6,
                child: Padding(
                  padding: const EdgeInsets.all(18.0),
                  child: Text("Login form"),
                ))));
  }
}
私たちはそれをインポートする必要があるシミュレータのウェルカム画面を見ることができるようにするにはmain.dart ファイルを開きましょう.
import 'screens/welcome/welcome.dart';
また、return文のホームプロパティの値として渡す必要があります.
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Welcome(),
    );
  }
}
コンソールでRを押すと、シミュレータを見てアプリケーションをリロードできます.

ログインウィジェットを作成する


ログインフォームの作成を開始する時期です.にlib フォルダを作成widgets すべてのウィジェットを作成するフォルダです.
それが完了したら、新しく作成されたフォルダの中にlogin.dart ログインフォームを構築するファイル.
ウィジェットを定義するmaterial.dart そして、4つの決勝戦でウィジェットをつくること:UserNameField、PasswordField、LoginButton、SwitchButton.
import 'package:flutter/material.dart';

class Login extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final usernameField = TextFormField(
        decoration: InputDecoration(labelText: 'Username'),
        validator: (value) {
          if (value.isEmpty) {
            return "Please enter some text";
          }
          return null;
        });
    final passwordField = TextFormField(
        decoration: InputDecoration(labelText: 'Password'),
        validator: (value) {
          if (value.isEmpty) {
            return "Please enter some text";
          }
          return null;
        });
    final loginButton = RaisedButton(
      color: Color(0xFF2979FF),
      textColor: Colors.white,
      onPressed: () {},
      child: Text("Login", style: TextStyle(fontSize: 20)),
    );
    final switchButton = FlatButton(
        onPressed: () {
          onFormSwitch();
        },
        textColor: Color(0xFF2979FF),
        child: Text('SIGN UP'));
}
現在、我々はリターン文の中で我々のパズルから形を作らなければなりません.しかし、この前に、イメージをインポートする方法を学びましょう.

5 .画像


プロジェクトでイメージを使用するにはassets ルートフォルダのフォルダ.インサイドassets フォルダの場所を任意の画像を、あなたのロゴになると、私のlogo.png .
それから、我々は2009年に資産を輸入する必要がありますpubspec.yalm ファイルを開きましょう.
次に、コードが下記のように見えるようにしてください.
  uses-material-design: true
  assets:
    - assets/logo.png
今すぐログインフォームでロゴを使用し、テンプレートを構築することができます.
レッツゴートゥバックlogin.dart 以下のようなreturn文でファイルを更新し、コードを更新します.
return Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      SizedBox(height: 50.0, child: Image.asset('assets/logo.png')),
      SizedBox(height: 20.0),
      usernameField,
      SizedBox(height: 20.0),
      passwordField,
      SizedBox(height: 20.0),
      loginButton,
      SizedBox(height: 10.0),
      switchButton,
    ]);
我々のログインフォームをウェルカム画面にインポートしましょう.開きましょうwelcome.dart そして、次のコードでログインウィジェットをインポートします.
import 'package:fintech_app_dev/widgets/login.dart';
それから、Login() としてPadding() チャイルド.
return Scaffold(
        backgroundColor: Color(0xFF4A148C),
        body: Center(
            child: Container(
                margin: const EdgeInsets.all(20.0),
                color: Colors.white,
                height: _screenSize.height * 0.6,
                child: Padding(
                  padding: const EdgeInsets.all(18.0),
                  child: Login(),
                ))));
我々は、それがどのように働くかチェックする準備ができています.それで、コンソールに行って、再読み込みのためにRを押してください.とVoila、画面はこのように見えるはずです.

今、いくつかの対話を追加しましょうし、別のウィジェットにサインアップスイッチを作成しましょう.

6 .管理


我々は、我々の歓迎スクリーンに州の価値を設定することから始めます.このため、次のコードを使用します.
class _WelcomeState extends State<Welcome> {
  bool _login = true;

  @override
  Widget build(BuildContext context) {
次に、この値を使用する必要がありますLogin() 条件付きの文の種類としてのウィジェット.
return Scaffold(
        backgroundColor: Color(0xFF4A148C),
        body: Center(
            child: Container(
                margin: const EdgeInsets.all(20.0),
                color: Colors.white,
                height: _screenSize.height * 0.6,
                child: Padding(
                  padding: const EdgeInsets.all(18.0),
                  child: _login
                      ? Login() : Text("HERE WILL BE REGISTRATION FORM"),
                ))));
そして今、我々は機能を我々のLogin() ウィジェットは、_login プロパティ.
child: _login
  ? Login(onFormSwitch: () {
      setState(() {
        _login = !_login;
      });
    })
  : Text("HERE WILL BE REGISTRATION FORM"),
さて、最後のステップは私たちのこの機能を扱うことですLogin() ウィジェットは、そのファイルを開いて、ログインとlogincallbackを定義することから始めましょう.
class Login extends StatelessWidget {
  const Login({this.onFormSwitch});
  final LoginCallback onFormSwitch;
次に、このウィジェットの最後に次のコード行を追加しましょう.
typedef LoginCallback = void Function();
そして今、私たちはちょうどswitchButton .
final switchButton = FlatButton(
        onPressed: () {
          onFormSwitch();
        },
        textColor: Color(0xFF2979FF),
        child: Text('SIGN UP'));
ビオラ!それはテストの準備ができている!

テスト


今の仕事の結果を見ましょう.コンソールに戻って、再読み込みのためにRを押してください.ログイン画面にいるときは、サインアップボタンを押すと何が起こっているかを見てみてください!

結論


この記事は、我々がFintechモバイルアプリを構築するつもりである我々の新しいフラッターコースの最初のレッスンです.
今日、新しいプロジェクトを設定し、ログインフォームを作成することから始めました.次のレッスンでは、ログインを実行するAPI呼び出しを作成し、登録フォームを作成します.
また、あなたが私が使用するつもりであるように、同じバックエンドを使いたいならばGolang Course そして、1つを構築してみてください!
あなたがコードを得るために管理していない場合は、私たちのgithubでそれをチェックしてお気軽に.
Flutter Course - Lesson 1 - Code

読書ありがとう.
からのアナ
swiftを読めるようになろう！！１（classの概念編）
Lab2