{"id":4459,"date":"2023-02-12T19:20:43","date_gmt":"2023-02-12T10:20:43","guid":{"rendered":"https:\/\/www.wsmeguro.jp\/wp\/?p=4459"},"modified":"2025-01-13T15:18:41","modified_gmt":"2025-01-13T06:18:41","slug":"flutter%e3%81%ae%e7%b7%b4%e7%bf%92%ef%bc%94%ef%bc%9alayout%e3%81%aetutorial","status":"publish","type":"post","link":"https:\/\/www.wsmeguro.jp\/wp\/?p=4459","title":{"rendered":"Flutter\u306e\u7df4\u7fd2\uff14\uff1aLayout\u306eTutorial"},"content":{"rendered":"

\u4eca\u65e5\u306fLayout\u306eTutorial\u3092\u3084\u3063\u3066\u307f\u307e\u3057\u305f\u3002\u3067\u304d\u305f\u306e\u306f\u3053\u3061\u3089<\/a>\u3002
\nflutter\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u306f\u30b3\u30e9\u30e0\u3068\u30ed\u30a6\u306e\u7d44\u307f\u5408\u308f\u305b\u3068\u3044\u3046\u3053\u3068\u307f\u305f\u3044\u3067\u3059\u3002
\n\u30b3\u30e9\u30e0\u3084\u30ed\u30a6\u306b\u6a19\u793a\u3059\u308b\u30a6\u30a3\u30b8\u30c3\u30c8\u306f\u3001Widget build\u306e\u5f8c\u3001return MaterialApp()\u306e\u524d\u3001\u306b\u66f8\u304d\u51fa\u3057\u3066\u304a\u3044\u3066\u3001\u30b3\u30e9\u30e0\u3084\u30ed\u30a6\u3067\u547c\u3073\u51fa\u3059\u3068\u308f\u304b\u308a\u3084\u3059\u3044\u3068\u3044\u3046\u3053\u3068\u304c\u308f\u304b\u308a\u307e\u3057\u305f\u3002<\/p>\n

\n
\r\n\/\/\u524d\u534a\u90e8\u5206\u306f\u7565\r\nclass MyApp extends StatelessWidget {\r\n  const MyApp({super.key});\r\n\r\n  @override\r\n  Widget build(BuildContext context) {\r\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\/\/\u30bf\u30a4\u30c8\u30eb\u3092\u6a19\u793a\u3059\u308b\u30a6\u30a3\u30b8\u30c3\u30c8\r\n    Widget titleSection = Container(\r\n      padding: const EdgeInsets.all(32),\r\n      child: Row(\r\n        children: [\r\n          Expanded(\r\n            \/*1*\/\r\n            child: Column(\r\n              crossAxisAlignment: CrossAxisAlignment.start,\r\n              children: [\r\n                \/*2*\/\r\n                Container(\r\n                  padding: const EdgeInsets.only(bottom: 8),\r\n                  child: const Text(\r\n                    'Oeschinen Lake Campground',\r\n                    style: TextStyle(\r\n                      fontWeight: FontWeight.bold,\r\n                    ),\r\n                  ),\r\n                ),\r\n                Text(\r\n                  'Kandersteg, Switzerland',\r\n                  style: TextStyle(\r\n                    color: Colors.grey[500],\r\n                  ),\r\n                ),\r\n              ],\r\n            ),\r\n          ),\r\n          \/*3*\/\r\n          Icon(\r\n            Icons.star,\r\n            color: Colors.red[500],\r\n          ),\r\n          const Text('41'),\r\n        ],\r\n      ),\r\n    );\r\n\r\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\/\/\u30dc\u30bf\u30f3\u3092\u6a19\u793a\u3059\u308b\u30a6\u30a3\u30b8\u30c3\u30c8\r\n    Color color = Theme.of(context).primaryColor;\r\n\r\n    Widget buttonSection = Row(\r\n      mainAxisAlignment: MainAxisAlignment.spaceEvenly,\r\n      children: [\r\n        _buildButtonColumn(color, Icons.call, 'CALL'),\r\n        _buildButtonColumn(color, Icons.near_me, 'ROUTE'),\r\n        _buildButtonColumn(color, Icons.share, 'SHARE'),\r\n      ],\r\n    );\r\n\r\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\/\/\u30c6\u30ad\u30b9\u30c8\u3092\u6a19\u793a\u3059\u308b\u30a6\u30a3\u30b8\u30c3\u30c8\r\n    Widget textSection = const Padding(\r\n      padding: EdgeInsets.all(32),\r\n      child: Text(\r\n        'Lake Oeschinen lies at the foot of the Bl\u00fcemlisalp in the Bernese '\r\n        'Alps. Situated 1,578 meters above sea level, it is one of the '\r\n        'larger Alpine Lakes. A gondola ride from Kandersteg, followed by a '\r\n        'half-hour walk through pastures and pine forest, leads you to the '\r\n        'lake, which warms to 20 degrees Celsius in the summer. Activities '\r\n        'enjoyed here include rowing, and riding the summer toboggan run.',\r\n        softWrap: true,\r\n      ),\r\n    );\r\n\r\n    return MaterialApp(\r\n      title: 'Flutter layout demo',\r\n      theme: ThemeData(\r\n        primarySwatch: Colors.blueGrey,\r\n      ),\r\n      home: Scaffold(\r\n        appBar: AppBar(\r\n          title: const Text('Flutter layout demo'),\r\n        ),\r\n        body: ListView(\r\n          children: [\r\n            Image.asset(\r\n              'images\/lake.jpg',\r\n              width: 600,\r\n              height: 240,\r\n              fit: BoxFit.cover,\r\n            ),\r\n            \/\/\u30bf\u30a4\u30c8\u30eb\u3092\u6a19\u793a\u3059\u308b\u30a6\u30a3\u30b8\u30c3\u30c8\u306e\u547c\u3073\u51fa\u3057\r\n            titleSection,\r\n            \/\/\u30dc\u30bf\u30f3\u3092\u6a19\u793a\u3059\u308b\u30a6\u30a3\u30b8\u30c3\u30c8\u306e\u547c\u3073\u51fa\u3057\r\n            buttonSection,\r\n            \/\/\u30c6\u30ad\u30b9\u30c8\u3092\u6a19\u793a\u3059\u308b\u30a6\u30a3\u30b8\u30c3\u30c8\u306e\u547c\u3073\u51fa\u3057\r\n            textSection,\r\n          ],\r\n        ),\r\n      ),\r\n    );\r\n  }\r\n\r\n  Column _buildButtonColumn(Color color, IconData icon, String label) {\r\n    return Column(\r\n      mainAxisSize: MainAxisSize.min,\r\n      mainAxisAlignment: MainAxisAlignment.center,\r\n      children: [\r\n        Icon(icon, color: color),\r\n        Container(\r\n          margin: const EdgeInsets.only(top: 8),\r\n          child: Text(\r\n            label,\r\n            style: TextStyle(\r\n              fontSize: 12,\r\n              fontWeight: FontWeight.w400,\r\n              color: color,\r\n            ),\r\n          ),\r\n        ),\r\n      ],\r\n    );\r\n  }\r\n}\r\n<\/code><\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
\u4eca\u65e5\u306fLayout\u306eTutorial\u3092\u3084\u3063\u3066\u307f\u307e\u3057\u305f\u3002\u3067\u304d\u305f\u306e\u306f\u3053\u3061\u3089\u3002 flutter\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u306f\u30b3\u30e9\u30e0\u3068\u30ed\u30a6\u306e\u7d44\u307f\u5408\u308f\u305b\u3068\u3044\u3046\u3053\u3068\u307f\u305f\u3044\u3067\u3059\u3002 \u30b3\u30e9\u30e0\u3084\u30ed\u30a6\u306b\u6a19\u793a\u3059\u308b\u30a6\u30a3\u30b8\u30c3\u30c8\u306f\u3001Widget build\u306e\u5f8c\u3001re…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[667,603,668,669,505],"tags":[661,672],"class_list":["post-4459","post","type-post","status-publish","format-standard","hentry","category-column","category-flutter","category-row","category-widget","category-programming","tag-flutter"],"_links":{"self":[{"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/posts\/4459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4459"}],"version-history":[{"count":2,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/posts\/4459\/revisions"}],"predecessor-version":[{"id":4472,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/posts\/4459\/revisions\/4472"}],"wp:attachment":[{"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4459"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4459"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}