Flutter - Multi-Line TextField Background

MohammadHosseini
October 29, 2023
248 views
0 votes
2 Answers

I want to place a Container behind each line of a multi-line TextField, matching the width and height of each line. In other words, I have a multi-line TextField, and I want to automatically set a Container as its background for each line. I think I need to use Stack and ListView.builder, but my challenge is styling the Container according to each line of the TextField.

Note: the text is variable and comes from a TextField.

Tags: dart flutter

Answers

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController _controller =
      TextEditingController(text: 'hellontherenhownarenyou');
  ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    var lines = _controller.text.split('n');
    return Scaffold(
      body: Stack(
        children: [
          SingleChildScrollView(
            controller: _scrollController,
            child: Padding(
              padding: EdgeInsets.fromLTRB(0, 8, 0, 0),
              child: Column(
                children: lines.map((txt) {
                  return Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Align(
                        alignment: Alignment.center,
                        child: Container(
                          color: lines.indexOf(txt).isEven
                              ? Colors.green
                              : Colors.yellow, 
                          child: Text(
                            txt,
                            style: TextStyle(
                                fontSize: 20,
                                color: Colors.transparent),
                          ),
                        ),
                      ),
                    ],
                  );
                }).toList(),
              ),
            ),
          ),
          TextField(
            controller: _controller,
            maxLines: null,
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 20),
            onChanged: (value) {
              setState(() {}); 
            },
            scrollController: _scrollController,
            decoration: InputDecoration(
              border: InputBorder.none,
            ),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Multi-Line TextField with Containers'),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController _textController = TextEditingController();

  @override
  Widget build(BuildContext context) {
 
    List<String> lines = _textController.text.split('n');

    return Column(
      children: <Widget>[
        Expanded(
          child: ListView.builder(
            itemCount: lines.length,
            itemBuilder: (BuildContext context, int index) {
              
              return Container(
                color: Colors.lightBlue,
                margin: EdgeInsets.all(5), 
                child: Text(lines[index]), 
              );
            },
          ),
        ),
        TextField(
          controller: _textController,
          keyboardType: TextInputType.multiline,
          maxLines: null,
        ),
      ],
    );
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – Multi-Line TextField Background

Answers