flutter的Flexible和 Expanded的區別

題記 —— 執劍天涯，從你的點滴積累開始，所及之處，必精益求精，即是折騰每一天。

重要訊息

• flutter中網路請求dio使用分析 視訊教程在這裡
• Flutter 從入門實踐到開發一個APP之UI基礎篇 視訊
• Flutter 從入門實踐到開發一個APP之開發實戰基礎篇
• flutter跨平臺開發一點一滴分析系列文章系列文章 在這裡了

---

不同之處是Expanded會強制填充剩餘留白空間，而Flexible不會強制填充。如下圖所示。

核心程式碼如下：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class FlexMain2Page extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
///  Flexible和 Expanded的區別
class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("佈局 "),
        ),
        body:    Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            ///區域一的內容
            Container(
              padding: EdgeInsets.all(10),
              child: Text("文字二"),
              color: Colors.grey[300],
            ),
            ///區域二的內容
            Flexible(
              flex: 1,
              child: Container(
                width: 120,
                padding: EdgeInsets.all(10),
                child: Text("嚴於律己，精於行動，點滴積累，著眼未來，你也許不負青春"),
                color: Colors.grey[500],
              ),
            ),
          ],
        ),
    );
  }
}

複製程式碼