[windows/flutter] App的景點介紹切版

參考網址


1.

import 'package:flutter/material.dart';

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


class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    Widget titleSection = Container(
      padding: const EdgeInsets.all(32.0),
      child: Row(
        children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: Text(
                    'Lake',
                    style: TextStyle(
                      fontWeight: FontWeight.bold
                    )
                  )
                ),
                Text(
                  'Switzerland',
                  style: TextStyle(
                    color: Colors.grey[500]
                  )
                )
              ]
            )
          ),
          Icon(
            Icons.star,
            color: Colors.red[500],
          ),
          Text('41')
        ]
      )
    );


    return MaterialApp(
      title: 'demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('demo'),
        ),
        body: Column(
          children: [
            titleSection
          ]
        )
      )
    );
  }
}

1-1. 為什麼要加const
means the only single time memory space allocated and you never gonna change it.
1-2. TextStyle有哪些可以用
目前使用過了fontWeight和color
1-3. 沒加Expanded會長這樣，會把此元素跟下一個元素根據螢幕寬度進行填滿
 
1-4. 沒加CrossAxisAlignment.start會長這樣

1-5. 想要有padding就要包個Container
1-6. 想要有children時，上下排列就包Column，左右排列就包Row

2.

    Column _buildButtonColumn(Color color, IconData icon, String label){
      return Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(icon, color: color),
          Container(
            margin: const EdgeInsets.only(top: 8.0),
            child: Text(
              label,
              style: TextStyle(
                fontSize: 12.0,
                fontWeight: FontWeight.w400,
                color: color
              )
            )
          )
        ]
      );
    }
    Color color = Theme.of(context).primaryColor;
    Widget buttonSection = Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          _buildButtonColumn(color, Icons.call, 'CALL'),
          _buildButtonColumn(color, Icons.near_me, 'ROUTE'),
          _buildButtonColumn(color, Icons.share, 'SHARE'),
        ]
      )
    );
    return MaterialApp(
      title: 'demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('demo'),
        ),
        body: Column(
          children: [
            titleSection,
            buttonSection
          ]
        )
      )
    );

2-1. 沒有mainAxisAlignment: MainAxisAlignment.spaceEvenly會長這樣

spaceEvenly → const MainAxisAlignment
Place the free space evenly between the children as well as before and after the first and last child.
2-2.Theme.of(context).primaryColor 的設定要寫在

new MaterialApp(
  title: title,
  theme: new ThemeData(
    brightness: Brightness.dark,
    primaryColor: Colors.lightBlue[800],
    accentColor: Colors.cyan[600],
  ),
);

import 'package:flutter/material.dart';

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


class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'demo',
      theme: new ThemeData(
        primaryColor: Colors.amber
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('demo'),
        ),
        body: new MyHomePage()
      )
    );

  }
}

class MyHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    Widget titleSection = Container(
      padding: const EdgeInsets.all(32.0),
      child: Row(
        children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: Text(
                    'Lake',
                    style: TextStyle(
                      fontWeight: FontWeight.bold
                    )
                  )
                ),
                Text(
                  'Switzerland',
                  style: TextStyle(
                    color: Colors.grey[500]
                  )
                )
              ]
            )
          ),
          Icon(
            Icons.star,
            color: Colors.red[500],
          ),
          Text('41')
        ]
      )
    );

    Column _buildButtonColumn(Color color, IconData icon, String label){
      return Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(icon, color: color),
          Container(
            margin: const EdgeInsets.only(top: 8.0),
            child: Text(
              label,
              style: TextStyle(
                fontSize: 12.0,
                fontWeight: FontWeight.w400,
                color: color
              )
            )
          )
        ]
      );
    }
    Color color = Theme.of(context).primaryColor;
    Widget buttonSection = Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          _buildButtonColumn(color, Icons.call, 'CALL'),
          _buildButtonColumn(color, Icons.near_me, 'ROUTE'),
          _buildButtonColumn(color, Icons.share, 'SHARE'),
        ]
    );
    return Column(
            children: [
              titleSection,
              buttonSection
            ]
          );
  }
}

3.

    Widget textSection = Container(
      padding: const EdgeInsets.all(32.0),
      child: Text(
        'Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese '
        'Alps. Situated 1,578 meters above sea level, it is one of the '
        'larger Alpine Lakes. A gondola ride from Kandersteg, followed by a '
        'half-hour walk through pastures and pine forest, leads you to the '
        'lake, which warms to 20 degrees Celsius in the summer. Activities '
        'enjoyed here include rowing, and riding the summer toboggan run.',
        softWrap: true
      ),
    );
    return Column(
            children: [
              titleSection,
              buttonSection,
              textSection
            ]
          );

3-1. 若softWrap是false

4.加入圖片( 註: images是自己創的資料夾 )
pubspec.yaml

  assets:
   - images/lake.jpeg

5.若希望可以滾動視窗，就用ListView
In this final step, arrange all of the elements in a ListView, rather than a Column, because a ListView supports app body scrolling when the app is run on a small device.

    return ListView(
            children: [
              Image.asset(
                'images/lake.jpg',
                width: 600.0,
                height: 240.0,
                fit: BoxFit.cover
              ),
              titleSection,
              buttonSection,
              textSection
            ]
          );

5-1. 若沒使用fit: BoxFit.cover，會長這樣