顯示 Layout 線輔助 Layout | 點燈坊

顯示 Layout 線可輔助了解目前 Layout 狀況，進而抓出跑版的元兇。

Version

Flutter 3.24

Flutter

• Android 與 iOS 都成功以 layout 線顯示目前以 Column 為 layout 的狀況

debugPaintSizeEnable

main.dart

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

import 'home.dart';

void main() {
  debugPaintSizeEnabled = true;
  runApp(const App());
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: Home());
  }
}

Line 2

import 'package:flutter/rendering.dart';

• 引用 package:flutter/rendering.dart

Line 6

void main() {
  debugPaintSizeEnabled = true;
  runApp(const App());
}

• 在 main() 內將 debugPaintSizeEnabled 設定為 true，即可顯示 layout 線

home.dart

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    var appBar = AppBar(title: const Text('Debug Paint Size Enabled'));

    var column1 = const Expanded(child: Text('Column1'));

    var column2 = const Expanded(child: Center(child: Text('Column2')));

    var column3 = const Expanded(
        child:
            Align(alignment: Alignment.bottomCenter, child: Text('Column3')));

    var body = Column(children: [
      column1,
      column2,
      column3,
    ]);

    return Scaffold(appBar: appBar, body: body);
  }
}

• 使用 Column、Expanded 與 Align 進行 layout

Conclusion

• 打開 debugPaintSizeEnabled 設定後，就不必再盲目不知 layout 長怎樣了