Contents
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