语法荧光笔不会展开以显示所有代码

Question

我试图提供一个代码编辑器，该编辑器从文本表单字段中获取输入，并使用DartSyntaxHighlighter在Rich Text小部件上显示输出。

尽管对于一小段代码来说它可以正常工作，但是对于一小段代码来说，它并不能显示全部代码。到目前为止，这是我所做的：

class CodeEditorWidget extends StatefulWidget {

  CodeEditorWidget();

  @override
  _ContentWidgetState createState() {
    return _ContentWidgetState();
  }
}

class _ContentWidgetState extends BaseState<CodeEditorWidget> {

  String _currentCode = "";

  @override
  void initializeData() {
    _currentCode = "class HelloWorld {\n"
        "public static void main() {\n"
        "System.out.println(\"Hello again\");\n"
        "}\n"
        "}";
    _contentController.addListener(() {
      _currentCode = _contentController.value.text;
      setState(() {

      });
    });
  }

  @override
  Widget build(BuildContext context) => _buildContent();

  Widget _buildContent() {
    //return _buildBody();
    userState = AppStateWidget.of(context).userState;
    return _buildBody();
  }

  Scaffold _buildBody() => Scaffold(
    key: _scaffoldLoginKey,
    appBar: buildAppBar("Code Editor"),
    body: _buildCodeEditor(),
    floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
    floatingActionButton: _buildFab(),
  );

  _buildCodeEditor() => Card(
    margin: const EdgeInsets.fromLTRB(BaseState.horizontalMargin, 0, BaseState.horizontalMargin, 0),
    child: Column(
      children: <Widget>[
        Expanded(
          child: _buildCodeView()//buildSyntaxCodeBlock(_currentCode, 12)//_buildCodeView(),
        ),
        _buildInputContainer()
      ],
    ),
  );

  _buildCodeView() => SingleChildScrollView(
    scrollDirection: Axis.vertical,
    child: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Container(
        width: double.infinity,
        height: double.maxFinite,
        padding: EdgeInsets.all(12),
        decoration: BoxDecoration(color: Colors.black),
        child: RichText(
          text: TextSpan(
            style: TextStyle(fontFamily: 'VarelaRound-Regular', fontSize: 12),
            children: <TextSpan>[
              DartSyntaxHighlighter(SyntaxHighlighterStyle.darkThemeStyle()).format(_currentCode)
            ],
          ),
        ),
      ),
    ),
  );

  Container _buildInputContainer() {
    return Container(
      color: Colors.grey,
      padding: EdgeInsets.all(8),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          _buildInputLayout(),
        ],
      ),
    );
  }

  _buildInputLayout() => Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[_buildTextForm()],
  );

  Widget _buildTextForm() => Flexible(
    child: Container(
      color: Colors.white,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextFormField(
          style: buildTextStyleBlack(16),
          decoration: InputDecoration.collapsed(hintText: "Type here..."),
          maxLines: 10,
          validator: _validateEmptyCode,
          controller: _contentController,
          keyboardType: TextInputType.multiline,
          onSaved: (String contentString) {
            //_currentCode = contentString;
          },
        ),
      ),
    ),
  );

  String _validateEmptyCode(String value) {
    return value.isEmpty ? "Required" : null;
  }

  var _contentController = TextEditingController();

  _buildFab() => FloatingActionButton(
    onPressed: () {
      setState(() {

      });
    },
    child: Icon(Icons.add),
    foregroundColor: Colors.white,
    backgroundColor: Colors.green,
  );

  var _scaffoldLoginKey = GlobalKey<ScaffoldState>();

  _showSnackBar(String message) => _scaffoldLoginKey.currentState
      .showSnackBar(SnackBar(content: Text(message, style: buildTextStyle(16),)));

}

以下是参考屏幕截图：

这是我正在尝试建立的网页。

Answer 1

对我来说，这段代码正在完成您要达到的目标。

TextEditingController text1Controller = new TextEditingController();
TextEditingController text2Controller = new TextEditingController();

@override
  Widget build(BuildContext context) {

    Size screenSize = MediaQuery.of(context).size;

    return new Scaffold(
      backgroundColor: Colors.white,
      appBar: new PreferredSize(
        preferredSize: new Size(screenSize.width, 55.0),
        child: new AppBar(
          elevation: 5.0,
          title : new Text(
              "Code Editor",
              style: new TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 18.0)),
          centerTitle: true,
          backgroundColor: Colors.blue,
        ),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            new Padding(padding: EdgeInsets.only(bottom: 20.0, top: 20.0)),
            new TextField(
              onChanged: (text) {
                setState(() {
                  text2Controller.text = text;
                });
              },
              controller: text1Controller,
              keyboardType: TextInputType.text,
              autofocus: false,
              decoration: InputDecoration(
                contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
                focusedBorder: OutlineInputBorder(borderSide: const BorderSide(color: Colors.black, width: 2.0)),
              ),
            ),
            new Padding(padding: EdgeInsets.only(bottom: 20.0)),
            new TextField(
              controller: text2Controller,
              keyboardType: TextInputType.text,
              autofocus: false,
              decoration: InputDecoration(
                contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
                focusedBorder: OutlineInputBorder(borderSide: const BorderSide(color: Colors.black, width: 2.0)),
              ),
            )
          ],),),
    );
  }