Flutter TextField Decoration サンプル

2020年5月13日 Posted by PURGE

TextField(
              style: TextStyle(
                color: Colors.black,
              ),
              decoration: InputDecoration(
                filled: true,
                fillColor: Colors.white,
                icon: Icon(
                  Icons.location_city,
                  color: Colors.white,
                ),
                hintText: 'Enter Name',
                hintStyle: TextStyle(
                  color: Colors.grey,
                ),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(10.0),
                  ),
                  borderSide: BorderSide.none,
                ),
              ),
            ),

Flutter TextField のテーマサンプル

2020年5月7日 Posted by PURGE

Theme(
  data: Theme.of(context).copyWith(splashColor: Colors.transparent),
  child: TextField(
    autofocus: false,
    style: TextStyle(fontSize: 22.0, color: Color(0xFFbdc6cf)),
    decoration: InputDecoration(
      filled: true,
      fillColor: Colors.white,
      hintText: 'Username',
      contentPadding:
          const EdgeInsets.only(left: 14.0, bottom: 8.0, top: 8.0),
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Colors.white),
        borderRadius: BorderRadius.circular(25.7),
      ),
      enabledBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: Colors.white),
        borderRadius: BorderRadius.circular(25.7),
      ),
    ),
  ),
);

Flutter Firebase Authenticationの操作

2020年5月5日 Posted by PURGE

Firebase Authenticationへの登録

  FirebaseAuth firebaseAuth = FirebaseAuth.instance;
  DatabaseReference dbRef = FirebaseDatabase.instance.reference().child('Users');

    firebaseAuth
        .createUserWithEmailAndPassword(
          email: emailController.text,
          password: passwordController.text).then((result){
          dbRef.child(result.user.uid).set({
            'email': emailController.text,
          })

Firebase Authenticationへのログイン

  FirebaseAuth firebaseAuth = FirebaseAuth.instance;
    firebaseAuth.signInWithEmailAndPassword(
        email: emailController.text,
        password: passwordController.text)
        .then((result){
          Navigator.pushReplacement(
              context,
              MaterialPageRoute(builder: (context) => HomePage(uid: result.user.uid)),
          );
    })

Firebase Authentication存在確認

    FirebaseAuth.instance.currentUser().then((response) { }

Firebase Authenticationログアウト

              FirebaseAuth auth = FirebaseAuth.instance;
              auth.signOut().then((response){}
               

Dart の非同期処理/同期処理

2020年4月26日 Posted by PURGE

thenを使用 (非同期処理)

void main(){
  print("A");
  futurePrint(Duration(milliseconds: 2000), "B")
    .then((status) => print(status));
  print("C");
  futurePrint(Duration(milliseconds: 1000), "D")
    .then((status) => print(status));
  print("E");
}

Future<String> futurePrint(Duration dr, String msg){
  return Future.delayed(dr).then((onValue) => msg);
}

//A
//C
//E
//D
//B

async / await を使用 (同期処理)

void main() async {
  print("A");
  await futurePrint(Duration(milliseconds: 2000), "B")
    .then((status) => print(status));
  print("C");
  await futurePrint(Duration(milliseconds: 1000), "D")
    .then((status) => print(status));
  print("E");
}

Future<String> futurePrint(Duration dr, String msg){
  return Future.delayed(dr).then((onValue) => msg);
}

//A
//B
//C
//D
//E

Elixir 値取得方法

2020年4月22日 Posted by PURGE

# List からの値取り出し
list = [1,2,3,4]

IO.inspect(Enum.at(list, 0))
IO.inspect(Enum.at(list, 1))

# Map からの値取り出し
map = %{a: 1, b: 2, c: 3, d: 4}

IO.inspect(Map.get(map, :a))
IO.inspect(Map.get(map, :b))

# Tuple からの値取り出し
tuple = {1, 2, 3, 4}

IO.inspect(elem(tuple, 0))
IO.inspect(elem(tuple, 1))

Phoenix Server をバックグラウンドにて動作させる方法

2020年4月20日 Posted by PURGE

$ elixir --erl "-detached" -S mix phx.server

Elixir Amazon Linux2 へのインストール方法

2020年3月10日 Posted by PURGE

$ sudo yum install elixir
読み込んだプラグイン:extras_suggestions, langpacks, priorities, update-motd
パッケージ elixir は利用できません。
エラー: 何もしません
[ec2-user@ip-10-0-1-175 src]$ 
$ sudo amazon-linux-extras install -y epel

Erlang Amazon Linux2 へのインストール方法

2020年3月10日 Posted by PURGE

$sudo yum install git autoconf gcc gcc-c++ glibc-devel make ncurses-devel openssl-devel unixODBC unixODBC-devel java-1.8.0-openjdk-devel 

$sudo git clone https://github.com/erlang/otp.git

$sudo chown ec2-user:ec2-user -R otp/
$cd otp
$sudo ./otp_build autoconf
$sudo ./configure #--prefix=/usr/local/erlang
$sudo make
$sudo make install

vi ~/.bash_profile
PATH=$PATH:/usr/local/erlang/bin

#sudo git clone https://github.com/elixir-lang/elixir.git
#sudo chown ec2-user:ec2-user -R elixir/
$make clean test

Flutter MaterialApp と Scaffold

2020年1月2日 Posted by PURGE

Flutter を勉強し始めた。

そこで少しハマったところを覚え書きとして記載しておく。

下記のコードでも両方動作する。

Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Sample Page'),
      ),
    ),
  );
}
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Sample Page'),
    ),
  );
}

上記2つは動作するのだが、その違いは大きい。例えば、前画面から上記のページを下記にて呼んだ場合、前者はナビゲータバーの戻るボタンが表示されない。つまり、ページのスタックに積まれるのはAppレベルではないため階層が異なる。

Navigator.push(context, MaterialPageRoute(builder: (context) => NextPage()));

少しづつだが理解を深めたいと思う。

Phoenix – React 連携

2019年12月2日 Posted by PURGE

Phoenix Project 作成

$ mix phx.new ProjectName --app project_name --no-ecto

npm モジュールインストール

$ cd ProjectName/assets/node_modules/
$ npm install --save @babel/preset-react
$ npm install --save @babel/polyfill
$ npm install --save react react-dom redux react-redux
$ npm install --save react-router-dom
$ npm install --save connected-react-router history
$ npm install --save redux-thunk
$ npm install --save axios
$ npm install --save redux-form react-hook-form
$ npm install --save react-bootstrap
$ npm install --save history
$ npm install redux-saga --save

.babelrc 設定

assets/.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/react"
]
}

エントリポイント(index.js)の変更

$mv assets/js/app.js assets/js/index.js
index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<div>
Hello React!!
</div>,
document.getElementById('root')
);

webpack.config.js

entry: {
'./js/index.js': glob.sync('./vendor/**/*.js').concat(['./js/index.js'])
},
output: {
filename: 'index.js',
path: path.resolve(__dirname, '../priv/static/js')
},

index.eex の変更

lib/project_name_web/templates/page/index.eex

<section class="row">
<article class="column">
<div id="root"></div>
</article>
</section>

index.jsパスの変更

lib/project_name_web/templates/layout/app.eex

<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/index.js") %>"></script>