Flutter 界面显示初接触

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: const Text('Hello World'),
        ),
      ),
    );
  }
}

Helloworld 代码。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    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'),      ],    );
    String msg = 'Flutter layout demo';    return new MaterialApp(        title: msg,        home: new Scaffold(          appBar: new AppBar(            title: Text(msg),          ),          // body: Center(          //   child: const Text('Hello World'),          // ),          body: Column(            children: [              Image.asset(                'images/lake.jpeg',                width: 600,                height: 240,                fit: BoxFit.cover,              ),              titleSection,              buttonSection,              textSection            ],          ),        ));  }  Widget titleSection = Container(    padding: const EdgeInsets.all(32),    child: Row(      children: [        Expanded(          /*1*/          child: Column(            crossAxisAlignment: CrossAxisAlignment.start,            children: [              /*2*/              Container(                padding: const EdgeInsets.only(bottom: 8),                child: const Text(                  'Oeschinen Lake Campground',                  style: TextStyle(                    fontWeight: FontWeight.bold,                  ),                ),              ),              Text(                'Kandersteg, Switzerland',                style: TextStyle(                  color: Colors.grey[500],                ),              ),            ],          ),        ),        /*3*/        Icon(          Icons.star,          color: Colors.red[500],        ),        const 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),          child: Text(            label,            style: TextStyle(              fontSize: 12,              fontWeight: FontWeight.w400,              color: color,            ),          ),        ),      ],    );  }
  Widget textSection = const Padding(    padding: EdgeInsets.all(32),    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,    ),  );}

flutter.cn/docs/develo… 按照这篇教程的内容跑下来的。

其余Widget可以参看

• Container：向 widget 增加 padding、margins、borders、background color 或者其他的“装饰”。

• GridView：将 widget 展示为一个可滚动的网格。

• ListView：将 widget 展示为一个可滚动的列表。

• Stack：将 widget 覆盖在另一个的上面。

• Card：将相关信息整理到一个有圆角和阴影的盒子中。

• ListTile：将最多三行的文本、可选的导语以及后面的图标组织在一行中。

加载图片 flutter.cn/docs/develo…