Flutter Getting Started Notes Three

Detailed explanation of the layout of RowWidget

Code example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Row Widget Demo',
      home: Scaffold(
          appBar: new AppBar(
            title: new Text("水平方向布局"),
          ),
          body: new Row(
            children: [
              new RaisedButton(
                //不灵活布局
                onPressed: () {
    
    },
                color: Colors.redAccent,
                child: new Text('Red Button'),
              ),
              Expanded(
                //灵活布局
                child: new RaisedButton(
                  onPressed: () {
    
    },
                  color: Colors.orangeAccent,
                  child: new Text('Orange Button'),
                ),
              ),
              new RaisedButton(
                //不灵活布局
                onPressed: () {
    
    },
                color: Colors.purpleAccent,
                child: new Text('Purple Button'),
              ),
            ],
          )),
    );
  }
}

Run interface:

Layout ColumnWidget vertical layout component

Code example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Column Widget Demo',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text("垂直方向布局"),
        ),
        body: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.end, //副轴(水平方向)
            mainAxisAlignment: MainAxisAlignment.center, //主轴(垂直方向)
            children: [
              Text('I am Jessie'),
              Expanded(child: Text('I am Jessie!Hello Jessie!')),
              Text('I am Jessie'),
            ],
          ),
        ),
      ),
    );
  }
}

Run interface:

Layout StackWidget stack layout

Code example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    
    var stack = new Stack(
      alignment: const FractionalOffset(0.5, 0.9),
      children: [
        new CircleAvatar(
          backgroundImage: new NetworkImage(
              'https://img.zcool.cn/community/0105d85aa64e28a80121246d8d695c.png@1280w_1l_2o_100sh.png'),
          radius: 100.0,
        ),
        new Container(
          decoration: new BoxDecoration(
            color: Colors.white,
          ),
          padding: EdgeInsets.all(5.0),
          child: Text('Jessie'),
        ),
      ],
    );
    return MaterialApp(
      title: 'Column Widget Demo',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text("StackWidget"),
        ),
        body: Center(
          child: stack,
        ),
      ),
    );
  }
}

Run interface:

Layout PositionedWidget stacked positioning components

Code example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    
    var stack = new Stack(
      alignment: const FractionalOffset(0.5, 0.9),
      children: [
        new CircleAvatar(
          backgroundImage: new NetworkImage(
              'https://img.zcool.cn/community/0105d85aa64e28a80121246d8d695c.png@1280w_1l_2o_100sh.png'),
          radius: 100.0,
        ),
        new Positioned(
          top: 10.0,
          left: 10.0,
          child: new Text('Jessie'),
        ),
        new Positioned(
          bottom: 10.0,
          right: 10.0,
          child: new Text('不错子'),
        ),
      ],
    );
    return MaterialApp(
      title: 'Column Widget Demo',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text("StackWidget"),
        ),
        body: Center(
          child: stack,
        ),
      ),
    );
  }
}

Run interface:

Layout CardWidget card layout component

Code example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    

    var card = new Card(
      child: Column(
        children: [
          ListTile(
            title: Text(
              'XX省XX市XX区',
              style: TextStyle(fontWeight: FontWeight.w500),
            ),
            subtitle: Text('XXX:12345678912'),
            leading: new Icon(
              Icons.account_box,
              color: Colors.lightBlue,
            ),
          ),
          ListTile(
            title: Text(
              'XX省XX市XX区',
              style: TextStyle(fontWeight: FontWeight.w500),
            ),
            subtitle: Text('XXX:14725836914'),
            leading: new Icon(
              Icons.account_box,
              color: Colors.lightBlue,
            ),
          ),
          ListTile(
            title: Text(
              'XX省XX市XX区',
              style: TextStyle(fontWeight: FontWeight.w500),
            ),
            subtitle: Text('XXX:15926348726'),
            leading: new Icon(
              Icons.account_box,
              color: Colors.lightBlue,
            ),
          ),
        ],
      ),
    );
    
    return MaterialApp(
      title: 'Column Widget Demo',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('CardWidget'),
        ),
        body: Center(
          child: card,
        ),
      ),
    );
  }
}

Run interface: