第二天 HelloWorld、Text、Container

咸鱼技术博客：https://www.yuque.com/xytech/flutter/sh4fbm
技术胖博客：https://jspang.com/post/flutter1.html
张风捷特烈：https://juejin.im/post/5c1f358cf265da61223a54c7

HelloWorld

main.dart文件：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: '第一个flutter程序',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '这个是appbar 哈'
          ),
        ),
        body: Center(
          child: Text(
            '这个是body 哈哈'
          ),
        ),
      ),
    );
  }

}

展示效果：

Android上展示出来的效果

热重载：比如我们修改main.dart中的文字，按住command+shift+s就可以实时在模拟器中看到修改后的效果

热更新

【view】->【Tool Windows】->【Flutter Inspector】可以打开一些调试工具

image.png

比如说切换Android、ios的显示

ios显示效果

Text

main.dart文件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: '第一个flutter程序',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '这个是appbar 哈'
          ),
        ),
        body: Center(
          child: Text(
            '这个是body 哈哈测试很多文字哈哈测试很多文字哈哈测试很多文字哈哈测试很多文字',
          textAlign:TextAlign.center,
            overflow: TextOverflow.ellipsis,
            maxLines: 1,
            style: TextStyle(
              color: Color.fromARGB(255, 255, 150, 100),
              fontSize: 20.0,
              decoration: TextDecoration.underline,
              decorationStyle: TextDecorationStyle.dotted
            ),
          ),
        ),
      ),
    );
  }

}

image.png

Container

容器控件：类似于Html中的div标签，结合了常见的绘画、定位、大小调整
main.dart文件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: '第一个flutter程序',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '这个是appbar 哈'
          ),
        ),
        body: Center(
          child: Container(
           child: Text(
             '这个是body 哈哈测试很',
             textAlign:TextAlign.center,
             overflow: TextOverflow.ellipsis,
             maxLines: 1,
             style: TextStyle(
                 color: Color.fromARGB(255, 255, 150, 100),
                 fontSize: 20.0,
                 decoration: TextDecoration.underline,
                 decorationStyle: TextDecorationStyle.dotted
             ),
           ),
            alignment: Alignment.bottomCenter,
            width: 500.0,
            height: 400.0,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }

}

image.png
decoration属性与color属性不能一起使用 image.png

main.dart文件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: '第一个flutter程序',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '这个是appbar 哈'
          ),
        ),
        body: Center(
          child: Container(
           child: Text(
             '这个是body 哈哈测试很',
             textAlign:TextAlign.center,
             overflow: TextOverflow.ellipsis,
             maxLines: 1,
             style: TextStyle(
                 color: Color.fromARGB(255, 255, 150, 100),
                 fontSize: 20.0,
                 decoration: TextDecoration.underline,
                 decorationStyle: TextDecorationStyle.dotted
             ),
           ),
            //padding: const EdgeInsets.all(50.0),
            padding: const EdgeInsets.fromLTRB(10.0, 20.0, 0, 0),
            margin: const EdgeInsets.all(30.0),
            decoration: new BoxDecoration(
              gradient: const LinearGradient(
                  colors: [Colors.lightBlue,Colors.pinkAccent,Colors.cyan]
              ),
              border: Border.all(
                  width: 2.0,
                  color: Colors.red,
                style: BorderStyle.solid
              )
            ),

            alignment: Alignment.topLeft,
            width: 500.0,
            height: 400.0,
          ),
        ),
      ),
    );
  }

}

image.png