High-Order Components Λ࢖ͬͯ ࠶ར༻ੑ͕ߴ͍ίʔυΛॻ͘ ౉ᬒ ཾ೭հ @HeavenOSK

ࣗݾ঺հ • ౉ᬒ ཾ೭հʢΘͨͳ΂ɹΓΎ͏ͷ͚͢ʣ • Twitter - @HeavenOSK • ࢖༻ݴޠɿDart/Swift/Kotlin • FlutterΤϯδχΞʢΤψ࣍ݩגࣜձࣾʣ

ຊ୊

High-Order Components ͬͯԿʁ

High-Order Components(HOC) • Reactʹ͓͚ΔɺίϯϙʔωϯτΛ࠶ར༻͢ΔͨΊͷςΫ χοΫ • https://reactjs.org/docs/higher-order-components.html • ίϯϙʔωϯτΛऔಘͯ͠ɺ৽͍͠ίϯϙʔωϯτΛฦ͢ ؔ਺

Flutter͸ReactʹӨڹΛड͚͍ͯΔ • Flutterͷઃܭ͸ίϯϙʔωϯτࢦ޲ͰɺReactʹӨڹΛड ͚͍ͯΔ • https://flutter.io/docs/resources/faq#does-flutter-come-with-a- framework • Reactͷ։ൃςΫχοΫ͸ɺFlutterͰ΋ద༻Ͱ͖Δ৔߹͕͋Δ • Redux…΄͔ • High-Order Components - HOC΋ɺFlutterͰద༻Ͱ͖Δ

HOCΛͲ͏࢖͑͹͍͍Μ ͩΖ͏

ը໘ͷྫΛݟͳ͕Βߟ͑ͯΈ ·͢

ը໘࢓༷ • ઃఆը໘ • Ϧετܗࣜ • ϦετΞΠςϜҰͭʹର ͯ͠ɺҰͭͷઃఆ߲໨

ը໘࢓༷ʢৄࡉʣ • શମ͸Column͔ListView • ֤ߦ • ࠨଆ͸Textʢڞ௨ͷελΠ ϧʣ • ӈଆ͸৭ʑ • ButtonɺSwitchɺText

HOCΛ࢖Θͣʹ࣮૷ͨ͠ ίʔυΛݟͯΈ·͢ https://github.com/HeavenOSK/flutter_high_order_components/ commit/d3a8f61617e87f3a81accc2b9fa414f3e0f0c3cf

1.όʔδϣϯ൪߸ͷߦ Widget _buildVersionNumberRow() { return Container( height: 70.0, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( 'όʔδϣϯ', style: _LabelTextStyle, ), Text( '1.0.0', style: _InformationTextStyle, ), ], ), padding: EdgeInsets.symmetric(horizontal: 12.0), decoration: BoxDecoration( border: Border( bottom: BorderSide( width: 1.0, color: _BorderColor, ), ), ), ); }

2.ΞϓϦ࿈ܞͷߦ Widget _buildApplicationConnectionRow() { return Container( height: 70.0, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( 'ΞϓϦ࿈ܞ', style: _LabelTextStyle, ), Switch( value: false, onChanged: (currentValue) {}, ), ], ), padding: EdgeInsets.symmetric(horizontal: 12.0), decoration: BoxDecoration( border: Border( bottom: BorderSide( width: 1.0, color: _BorderColor, ), ), ), ); } Մม

Մม෦෼͸੺࿮಺͚ͩ

HOCͰڞ௨Խͯ͠ΈΔ https://github.com/HeavenOSK/flutter_high_order_components

• Container, Row, Text͸ڞ௨ • ӈଆͷ෦඼͚͕ͩՄมͰʮԿ͔ͷWidgetʯ͕ೖΔ • FlutterͰ͸ʮ͢΂͕ͯWidgetʯ • ͭ·Γӈଆʹ͸ʮWidgetΫϥεͷԿ͔ʯ͕ೖΔ • (WidgetΛδΣωϦοΫͳίϯϙʔωϯτͷܕͱߟ͑Δ) ϙΠϯτ

֤ߦΛग़ྗ͢ΔHOC Widget _buildSettingsListItem(String label, {Widget rightSideWidget}) { final children = List(); children.add( Text(label, style: _LabelTextStyle), ); if (rightSideWidget != null) { children.add(rightSideWidget); } return Container( height: 70.0, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: children, ), padding: EdgeInsets.symmetric(horizontal: 12.0), decoration: BoxDecoration( border: Border( bottom: BorderSide( width: 1.0, color: _BorderColor, ), ), ), ); }

ݺͼग़͠ଆͷίʔυ _buildSettingsList() { return ListView( children: [ _buildSettingsListItem( 'ΞϓϦ࿈ܞ', rightSideWidget: Switch( value: false, onChanged: (currentValue) {}, ), ), _buildSettingsListItem( 'όʔδϣϯ', rightSideWidget: Text( '1.0.0', style: _InformationTextStyle, ), ), ], ); }

HOCʹͨ݁͠Ռ • ίʔυͷ΄ͱΜͲͷ෦෼Λڞ௨ԽͰ͖ͨ • ίʔυ͕ಡΈ΍͘͢ͳͬͨ • Ͳͷ෦෼͕ڞ௨෦෼͔ɺՄม෦෼͔Ұ໨Ͱ෼͔Δ • →ίʔυͷϝϯςφϯε͕͠΍͍͢

·ͱΊ • Flutterʹ͓͚ΔHOC͸ʮWidgetΛऔಘͯ͠ɺ৽͍͠WidgetΛ ฦؔ͢਺ʯ • Flutterͷඪ४ϥΠϒϥϦͰ͸ɺHOC͸Α͘࢖ΘΕ͍ͯΔ • Container΍ColumnͳͲͷίϯετϥΫλ΋ɺchild/ childrenҾ਺ͰWidgetΛऔಘͯ͠ɺ৽ͨͳWidgetΛฦ͢ HOC • ϥΠϒϥϦ࣮૷͚ͩͰͳ͘ɺΞϓϦͷϓϩάϥϜͰ΋࢖ͬͯ ͍͖͍ͨ

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝ ·ͨ͠ ౉ᬒ ཾ೭հ @HeavenOSK