flutter - 如何将小部件/文本添加到容器的边框？

Question

我想在容器的边框上添加一些文本，以作为容器内容的帮助文本。我是 Flutter 的新手，有人可以帮忙吗。

Answer 1

没有任何直接的方法可以做到这一点。你必须使用 Stack和 Positioned小部件实现。

这里我演示了如何使用。

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Demo',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Demo'),
          ),
          body: Stack(
            children: <Widget>[
              SafeArea(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Stack(
                    children: <Widget>[
                      Column(
                        children: <Widget>[
                          Expanded(
                            child: Container(
                              decoration: BoxDecoration(border: Border.all(style: BorderStyle.solid,color: Colors.red,width: 5.0)),
                              child: Center(
                                child: Text("hello world"),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
              Positioned(
                  top: 0.0,
                  left: 20.0,
                  child: Container(
                    child: new Text("comment",style: TextStyle(fontSize: 20.0),),
                    color: Colors.white,
                  )
              ),
            ],
          ),
        ));
  }
}