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

 

<<前のページへ

Styling

How do I style my components?

コンポーネント(ウィジェット)のスタイルを設定するにはどうすればよいですか？

React Nativeでは、インラインスタイルとstylesheets.createを使用してコンポーネントのスタイルを設定します。

// React Native
<View style={styles.container}>
  <Text style={{ fontSize: 32, color: 'cyan', fontWeight: '600' }}>
    This is a sample text
  </Text>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

---

Flutterでは、TextウィジェットはそのstyleプロパティにTextStyleクラスのインスタンスを渡す形で使用できます。 同じテキストスタイルを複数の場所で使用する場合は、TextStyleクラスインスタンスを作成して、複数のテキストウィジェットに使用できます。

// Flutter
var textStyle = TextStyle(fontSize: 32.0, color: Colors.cyan, fontWeight:
   FontWeight.w600);
	...
Center(
  child: Column(
    children: <Widget>[
      Text(
        'Sample text',
        style: textStyle,
      ),
      Padding(
        padding: EdgeInsets.all(20.0),
        child: Icon(Icons.lightbulb_outline,
          size: 48.0, color: Colors.redAccent)
      ),
    ],
  ),
)

---

How do I use Icons and Colors?

React Nativeにはアイコンのサポートが含まれていないため、サードパーティのライブラリが使用されます。

Flutterでは、マテリアルライブラリをインポートすると、マテリアルのアイコンと色の豊富なセットも取り込まれます。

Icon(Icons.lightbulb_outline, color: Colors.redAccent)

---

Iconsクラスを使用するときは、プロジェクトのpubspec.yamlファイルで

uses-material-design：true

を設定してください。 これにより、アイコンを表示するMaterialIconsフォントがアプリに含まれるようになります。 一般に、マテリアルライブラリを使用する場合は、この行を含める必要があります。↓

name: my_awesome_application
flutter: uses-material-design: true

---

Flutterのクパチーノ（iOSスタイル）パッケージは、現在のiOSデザイン言語に忠実度の高いウィジェットを提供します。 CupertinoIconsフォントを使用するには、プロジェクトのpubspec.yamlファイルにcupertino_iconsの依存関係を追加します。

name: my_awesome_application
dependencies:
  cupertino_icons: ^0.1.0

---

コンポーネントの色とスタイルをグローバルにカスタマイズするには、ThemeDataを使用して、テーマのさまざまな側面のデフォルトの色を指定します。

MaterialAppのthemeプロパティをThemeDataオブジェクトに設定します。 Colorsクラスは、マテリアルデザインのカラーパレットから色を提供します。

class SampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        textSelectionColor: Colors.red
      ),
      home: SampleAppPage(),
    );
  }
}

---

How do I add style themes?

React Nativeでは、コンポーネントのための共通のテーマがスタイルシートに対して定義され、コンポーネントで(そのテーマが)使用されます。

Flutterで、ThemeDataクラスでスタイルを定義し、それをMaterialAppウィジェットのthemeプロパティに渡すことで、ほぼすべての統一されたスタイルを作成します。

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.cyan,
        brightness: Brightness.dark,
      ),
      home: StylingPage(),
    );
  }

---

MaterialAppウィジェットを使用しなくてもテーマを適用できます。

テーマウィジェットは、データパラメータでThemeDataを受け取り、そのすべての子ウィジェットにThemeDataを適用します。工事中🏗

 @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(
        primaryColor: Colors.cyan,
        brightness: brightness,
      ),
      child: Scaffold(
         backgroundColor: Theme.of(context).primaryColor,
              ...
              ...
      ),
    );
  }

---

 

 

 

 

次のページへ>>

参考

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