Loginボタンを押したらwebviewに遷移するだけの画面を作る。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542614/34f4c285-1afd-2e34-6d93-b21e74999e0f.png)

###参考
https://github.com/flutter/samples/tree/master/provider_shopper
https://qiita.com/aoinakanishi/items/e58e7dd537ca1d1b76d6

###bin配下のディレクトリ構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542614/d59961cf-06a6-d142-e835-6385f2a0a25f.png)

##main

```dart:main.dart
import 'package:flutter/material.dart';
import 'HOGE/screen/login.dart';
import 'HOGE/screen/webview.dart';

void main() {
  runApp(new MaterialApp(
    title: 'Navigation with Routes',
    routes: <String, WidgetBuilder>{
      '/': (_) => new Login(),
      '/webview': (_) => new Webview(),
    },
  ));
}
```

##画面遷移について

####別ファイルのクラスを使用するためにはファイルをimportする必要がある。
HOGEはプロジェクト名

```dart
import 'HOGE/screen/login.dart';
```

####画面遷移を管理する処理

'/' で指定されるクラスが初期表示画面になる。

```dart
    routes: <String, WidgetBuilder>{
      '/': (_) => new Login(),
      '/webview': (_) => new Webview(),
    },
```


####画面遷移処理

'/webview'で指定されている画面に遷移したい場合

```dart
Navigator.of(context).pushNamed("/webview");
```
pushするとNavigatoorBarに戻るボタンが追加される。

##ログイン画面

```dart:screen/login.dart
import 'package:flutter/material.dart';

// ---------
// ログイン画面
// ---------
class Login extends StatefulWidget {
  @override
  _LoginState createState() => new _LoginState();
}

class _LoginState extends State<Login> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Login"),
        backgroundColor: Colors.orange,
      ),
      body: Center(
        child: Container(
          padding: EdgeInsets.only(right: 80.0, left: 80.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextFormField(
                decoration: InputDecoration(
                  hintText: 'Id',
                ),
              ),
              TextFormField(
                decoration: InputDecoration(
                  hintText: 'Password',
                ),
                obscureText: true,
              ),
              SizedBox(
                height: 16,
              ),
              RaisedButton(
                color: Colors.orange,
                child: Text('Login'),
                onPressed: () {
                  Navigator.of(context).pushNamed("/webview");
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

```

##レイアウトについて

###左右に余白を作る
```dart
// 右から80pt、左から80ptの余白を開ける「
padding: EdgeInsets.only(right: 80.0, left: 80.0),

// 上下に余白を開ける場合
padding: EdgeInsets.only(top: 80.0, bottom: 80.0),

// 全方向を指定する場合
padding: EdgeInsets.all(80.0),
```

###Containerに複数の部品を配置する
```dart
child: Container(
  child: Column(
    children: [
    // ここに部品を記述
    ]
  )
)
```

###間隔をあける部品
loginボタンとパスワードの縦方向の間隔をあけるのに使っている。

```dart
SizedBox(
  height: 16,
),
```

###入力したパスワードを隠す設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542614/6dc933e0-9e20-c668-80a3-875ed265fc61.png)

```dart
  obscureText: true,
```

##weview

###参考
https://qiita.com/aoinakanishi/items/e58e7dd537ca1d1b76d6

```dart:screen/webview.dart
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

// ---------
// Webview画面
// ---------
class Webview extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("webview"),
      ),
      body: WebView(
        initialUrl: 'https://www.google.com',
        javaScriptMode: JavaScriptMode.unrestricted,
      ),
    );
  }
}
```
###pubspecファイルにwebview_flutterを追加

```yml:pubspec.yaml
dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
#///追加
  webview_flutter: ^0.1.0+1

dev_dependencies:
  flutter_test:
    sdk: flutter
```


###ライブラリのインポート

```dart
import 'package:webview_flutter/webview_flutter.dart';
```

###webview表示

```dart
      body: WebView(
        initialUrl: 'https://www.google.com',
        // jsを制限しない設定を追加する場合
        javaScriptMode: JavaScriptMode.unrestricted,
      ),
```