2020/11/6 Flutter for React Native developersの訳パート2

Contents

Project structure and resources

Where do I start writing the code?

lib /main.dartファイルから始めます。 Flutterアプリを作成すると自動生成されます。

// Dart
//lib/main.dart
void main(){
 print('Hello, this is the main function.');
}

Flutterでは、エントリポイントファイルは「projectname」/lib/main.dartであり、実行はmain関数から開始されます。

How are files structured in a Flutter app?

新しいFlutterプロジェクトを作成すると、次のディレクトリ構造が構築されます。後でカスタマイズできますが、初めはこの状態です。

┬
└ projectname
  ┬
  ├ android      - Contains Android-specific files.
  ├ build        - Stores iOS and Android build files.
  ├ ios          - Contains iOS-specific files.
  ├ lib          - Contains externally accessible Dart source files.
    ┬
    └ src        - Contains additional source files.
    └ main.dart  - The Flutter entry point and the start of a new app.
                   This is generated automatically when you create a Flutter
                    project.
                   It's where you start writing your Dart code.
  ├ test         - Contains automated test files.
  └ pubspec.yaml - Contains the metadata for the Flutter app.
                   This is equivalent to the package.json file in React Native.

Where do I put my resources and assets and how do I use them?

リソースとアセットはどこに置き、どのように使用しますか？

Flutterリソースまたはアセットは、アプリにバンドルおよびデプロイされ、実行時にアクセスできるファイルです。 Flutterアプリには、次のアセットタイプを含めることができます。

JSONファイルなどの静的データ
構成ファイル(Configuration files)
アイコンと画像（JPEG、PNG、GIF、アニメーションGIF、WebP、アニメーションWebP、BMP、およびWBMP）

Flutterは、プロジェクトのルートにあるpubspec.yamlファイルを使用して、アプリに必要なアセットを指定します。

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png

assetsサブセクションでは、アプリに含める必要のあるファイルを指定します。

各アセットは、アセットファイルが配置されている「pubspec.yamlファイルを基準とした明示的なパス」によって識別されます。

アセットが宣言される順序は重要ではありません。

使用される実際のディレクトリ（この場合はassets）は重要ではありません。

アセットは任意のアプリディレクトリに配置できますが、assetsディレクトリに配置することをお勧めします。

ビルド中に、Flutterはアセットをアセットバンドルと呼ばれる特別なアーカイブに配置します。このアーカイブは、アプリが実行時に読み取ります。アセットのパスがpubspec.yamlのアセットセクションで指定されている場合、ビルドプロセスは、隣接するサブディレクトリで同じ名前のファイルを探します。これらのファイルは、指定されたアセットとともにアセットバンドルにも含まれています。 Flutterは、アプリに解像度に適した画像を選択するときにアセットバリアントを使用します。

React Nativeでは、画像ファイルをソースコードディレクトリに配置して参照することにより、静止画像を追加します。

<Image source={require('./my-icon.png')} />

Flutterで、ウィジェットのbuildメソッド内で、AssetImageクラスを使用して、アプリに静止画像を追加します。

image: AssetImage('assets/background.png'),

詳細については、Flutterでのアセットと画像の追加を参照してください。

How do I load images over a network?

React Nativeでは、ImageコンポーネントのsourceプロパティでURIを指定し、必要に応じてsizeも指定します。

Flutterで、Image.networkコンストラクターを使用してURLからの画像を含めます。

// Flutter
body: Image.network(
          'https://flutter.io/images/owl.jpg',

How do I install packages and package plugins?

Flutterは、他の開発者がFlutterおよびDartエコシステムに提供した共有パッケージの使用をサポートしています。これにより、すべてを最初から開発しなくても、アプリをすばやく構築できます。

プラットフォーム固有のコードを含むパッケージは、パッケージプラグインと呼ばれます。

React Nativeでは、yarn add {package-name}またはnpminstall –save {package-name}を使用して、コマンドラインからパッケージをインストールします。

Flutterで、次の手順を使用してパッケージをインストールします。

パッケージ名とバージョンをpubspec.yaml依存関係セクションに追加します。以下の例は、google_sign_inDartパッケージをpubspec.yamlファイルに追加する方法を示しています。

空白が重要なので、YAMLファイルで作業するときにスペースを確認してください！

dependencies:
  flutter:
    sdk: flutter
  google_sign_in: ^3.0.3

flutter pub getを使用して、コマンドラインからパッケージをインストールします。

IDEを使用している場合は、多くの場合、flutter pub getが実行されるか、そうするように求められる場合があります。

↓以下に示すように、パッケージをアプリコードにインポートします。

import 'package:google_sign_in/google_sign_in.dart';

For more information, see Using Packages and Developing Packages & Plugins.

You can find many packages shared by Flutter developers in the Flutter packages section of pub.dev.

Flutter widgets

Flutterでは、現在の構成と状態を前提として、ビューがどのように表示されるかを記述する「ウィジェット(Widget)」によりUIを構築します。

ウィジェットは多くの場合、強力な効果を生み出すためにネストされた多くの小さな単一目的のウィジェットで構成されています。

たとえば、コンテナウィジェットは、レイアウト、ペイント、配置、およびサイズ設定を担当するいくつかのウィジェットで構成されています。

具体的には、Containerウィジェットには、LimitedBox、ConstrainedBox、Align、Padding、DecoratedBox、およびTransformウィジェットが含まれます。

コンテナをサブクラス化してカスタマイズされた効果を生成するのではなく、これらのウィジェットやその他の単純なウィジェットを新しい独自の方法で作成できます。

Centerウィジェットは、レイアウトを制御する方法のもう1つの例です。ウィジェットを中央に配置するには、ウィジェットをCenterウィジェットでラップしてから、Alignment、Row、Column、およびGridなどのレイアウトウィジェットを使用します。

これらのレイアウトウィジェットには、独自の視覚的表現はありません。代わりに、それらの唯一の目的は、別のウィジェットのレイアウトのある側面を制御することです。

ウィジェットが特定の方法でレンダリングされる理由を理解するには、隣接するウィジェットを調べると役立つことがよくあります。

For more information, see the Flutter Technical Overview.

For more information about the core widgets from the Widgets package, see Flutter Basic Widgets, the Flutter Widget Catalog, or the Flutter Widget Index.

Views

What is the equivalent of the `View` container?

React Nativeでは、Viewは、Flexbox、スタイル、タッチ処理、およびアクセシビリティコントロールを備えたレイアウトをサポートするコンテナーです。

Flutterでは、Container、Row、Column、Centerなど、ウィジェットライブラリのコアレイアウトウィジェットを使用できます。詳細については、レイアウトウィジェットカタログを参照してください。

What is the equivalent of `FlatList` or `SectionList`?

Listは、垂直方向に配置されたコンポーネントのスクロール可能なリストです。

React Nativeでは、FlatListまたはSectionListを使用して、単純なリストまたはセクション化されたリストをレンダリングします。

// React Native
<FlatList
  data={[ ... ]}
  renderItem={({ item }) => <Text>{item.key}</Text>}
/>

ListViewは、Flutterで最も一般的に使用されているスクロールウィジェットです。

デフォルトのコンストラクターは、引数(children)として明示的な(子ウィジェットの)リスト(list,配列)を取ります。 ListViewは、少数のウィジェットに最適です。大きなリストまたは無限のリストの場合は、ListView.builderを使用します。これは、オンデマンドで子を構築し、表示されている子のみを構築します。

// Flutter
var data = [ ... ];
ListView.builder(
  itemCount: data.length,
  itemBuilder: (context, int index) {
    return Text(
      data[index],
    );
  },
)

Flat list on Android

無限スクロールリストを実装する方法については、「最初のフラッターアプリを書く」パート1のコードラボを参照してください。

How do I use a Canvas to draw or paint?

React Nativeにはキャンバスコンポーネントが存在しないため、react-native-canvasなどのサードパーティライブラリが使用されます。

// React Native
handleCanvas = canvas => {
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'skyblue';
  ctx.beginPath();
  ctx.arc(75, 75, 50, 0, 2 * Math.PI);
  ctx.fillRect(150, 100, 300, 300);
  ctx.stroke();
};

render() {
  return (
    <View>
      <Canvas ref={this.handleCanvas} />
    </View>
  );
}

Flutterでは、CustomPaintクラスとCustomPainterクラスを使用してキャンバスに描画できます。

次の例は、CustomPaintウィジェットを使用してペイントフェーズ中に描画する方法を示しています。抽象クラスCustomPainterを実装し、CustomPaintのpainterプロパティに渡します。 CustomPaintサブクラスは、paint（）メソッドとshouldRepaint（）メソッドを実装する必要があります。

(main.dartに以下のコードをコピペして実行してください。)

//main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home:Scaffold(
        appBar:AppBar(),
        body:MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MyCanvas(title:'MyCanvasSample');

  }
}

class MyCanvasPainter extends CustomPainter {

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    paint.color = Colors.amber;
    canvas.drawCircle(Offset(100.0, 200.0), 40.0, paint);
    Paint paintRect = Paint();
    paintRect.color = Colors.lightBlue;
    Rect rect = Rect.fromPoints(Offset(50.0, 300.0), Offset(300.0, 400.0));
    canvas.drawRect(rect, paintRect);
  }

  bool shouldRepaint(MyCanvasPainter oldDelegate) => false;
  bool shouldRebuildSemantics(MyCanvasPainter oldDelegate) => false;
}

class MyCanvas extends StatefulWidget{
  MyCanvas({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyCanvasState createState() => _MyCanvasState();

}

class _MyCanvasState extends State<MyCanvas> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        painter: MyCanvasPainter(),
      ),
    );
  }
}

Layouts

How do I use widgets to define layout properties?

React Nativeでは、ほとんどのレイアウトは、特定のコンポーネントに渡されるpropを使用して実行できます。

たとえば、フレックスボックスのプロパティを指定するために、ビューコンポーネントでスタイルプロップを使用できます。コンポーネントを列に配置するには、flexDirection：“ column”などの小道具を指定します。

Flutterでは、レイアウトは主に、レイアウトを提供するために特別に設計されたウィジェットによって定義され、コントロールウィジェットとそのスタイルプロパティと組み合わされます。

たとえば、Column(列)ウィジェットとRow(行)ウィジェットは子ウィジェットの配列を引数として取り、それぞれ垂直方向と水平方向に配置します。

Container(コンテナ)ウィジェットはレイアウトプロパティとスタイリングプロパティの組み合わせを引数として取り、Centerウィジェットはその子ウィジェットを中央に配置します。

// Flutter
Center(
  child: Column(
    children: <Widget>[
      Container(
        color: Colors.red,
        width: 100.0,
        height: 100.0,
      ),
      Container(
        color: Colors.blue,
        width: 100.0,
        height: 100.0,
      ),
      Container(
        color: Colors.green,
        width: 100.0,
        height: 100.0,
      ),
    ],
  ),
)

Flutterは、コアウィジェットライブラリでさまざまなレイアウトウィジェットを提供します。たとえば、Padding(パディング)、Align(整列)、Stack(スタック)などです。

Layout on Android

How do I layer widgets?

React Nativeでは、absolute positioningを使用してコンポーネントを階層化できます。

Flutterは、Stack(スタック)ウィジェットを使用して、子ウィジェットを重ね合わせて配置します。ウィジェットは、基本ウィジェットと完全にまたは部分的にオーバーラップ(重ね合わせ)できます。

Stack(スタック)ウィジェットは、ボックスの端を基準にして子を配置します。このクラスは、単に複数の子ウィジェットをオーバーラップさせたい場合に役立ちます。

// Flutter
Stack(
  alignment: const Alignment(0.6, 0.6),
  children: <Widget>[
    CircleAvatar(
      backgroundImage: NetworkImage(
        'https://avatars3.githubusercontent.com/u/14101776?v=4'),
    ),
    Container(
      decoration: BoxDecoration(
          color: Colors.black45,
      ),
      child: Text('Flutter'),
    ),
  ],
)

//main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home:Scaffold(
        appBar:AppBar(),
        body:MyStack(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MyCanvas(title:'MyStackSample');
  }
}

class MyStack extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return Container(
      //width:200,
      //height:200,
      child: Stack(
        alignment: const Alignment(-1.0, -1.0),
        children: <Widget>[
          Container(
            width:200,
            height:200,
            child: CircleAvatar(
              backgroundImage: NetworkImage(
                  'https://avatars3.githubusercontent.com/u/14101776?v=4'),
            ),
          ),
          Container(
            width:80,
            height:50,
            decoration: BoxDecoration(
              color: Colors.yellow,
            ),
            child: Text('Flutter'),
          ),
        ],
      ),
    );
  }
}

上の例では、Stackを使用して、CircleAvatarの上にコンテナ（テキストを黄色の背景に表示）をオーバーレイします。スタックは、alignmentプロパティの配置座標を使用してテキストをオフセット(位置を決める)します。

For more information, see the Stack class documentation.

次のページへ>>

参考

https://flutter.dev/docs/get-started/flutter-for/react-native-devs

https://flutter.dev/docs/get-started/flutter-for/react-native-devs#project-structure-and-resources