Flutter从入门到入土（二）Widget

1、Text 组件基本属性

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return MaterialApp(
      title: 'Text widget',

      home: Scaffold(
        body:Center(
          child: Text(
            'Hello Widget',
            textAlign: TextAlign.center,
            maxLines: 1,
            //超出部分省略，fade是渐变
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
              fontSize: 25.0,
              color: Color.fromARGB(255, 255, 125, 125),
              //下划线
              decoration: TextDecoration.underline,
              decorationStyle: TextDecorationStyle.solid,
            ),
          ),
        ),
      ),
    );
  }

}

 

 

2、Container使用

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return MaterialApp(
      title: "Text Widget",

      home: Scaffold(
        body: Center(
          //子容器设置
          child: Container(
            child: new Text("Small Stars",
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontSize: 40.0,
                  color: Color.fromARGB(255, 255, 125, 125)
              ),
            ),

            alignment: Alignment.center,
            width: 500.0,
            height: 400.0,
            color: Colors.lightBlue,
          ),
        ),
      ),

    );
  }

}

 

 

3、decoration 渐变使用

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return MaterialApp(
      title: "Text Widget",

      home: Scaffold(
        body: Center(
          //子容器设置
          child: Container(
            child: new Text("Small Stars",
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontSize: 40.0,
                  color: Color.fromARGB(255, 255, 125, 125)
              ),
            ),

            alignment: Alignment.topLeft,
            width: 500.0,
            height: 400.0,
            //color: Colors.lightBlue,

            //外边距设置
            //padding: const EdgeInsets.all(30.0),
            padding: const EdgeInsets.fromLTRB(100.0, 200.0, 0.0, 0.0),
            //内边距
            margin: const EdgeInsets.all(30.0),

            //渐变
            decoration: new BoxDecoration(
              //线性渐变
              gradient: const LinearGradient(
                  begin: Alignment.topLeft,
//                  end: Alignment(0.8, 0.0), // 10% of the width, so there are ten blinds.
//                  colors: [Colors.lightBlue, Colors.greenAccent, Colors.purple], // whitish to gray
                  tileMode: TileMode.repeated, // repeats the gradient over the canvas
                  colors: [Colors.lightBlue, Colors.deepOrange, Colors.teal]
              ),
//              border: Border.all(width: 5.0, color: Colors.pinkAccent)
            ),
          ),
        ),
      ),

    );
  }

}

 

 

 

报错：
Cannot provide both a color and a decoration
To provide both, use "decoration: BoxDecoration(color: color)".
'package:flutter/src/widgets/container.dart':
Failed assertion: line 320 pos 15: 'color == null || decoration == null'

原因是color 和 decoration 不能同时使用，去掉一个即可