Search code examples
flutterdarttabbar

How to insert a Column in TabBarView?


I have a doubt here... I want to know how I put 2 TextField inside same TabBar, because the second TextField shows in the other tab.

Sorry if it was poorly explained.

body: TabBarView(
  children: [
    new Padding(
      padding: EdgeInsets.fromLTRB(100.0, 50, 100.0, 1),
      child: TextField(
        controller: nota1Controller,
        keyboardType: TextInputType.number,
        decoration: InputDecoration(
          hintText: "Nota 1",
          hintStyle: TextStyle(color: Colors.green),
          filled: true,
          fillColor: Colors.green.shade50,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10),
            borderSide: BorderSide.none,
          ),
        ),
        textAlign: TextAlign.left,
        style: TextStyle(color: Colors.green, fontSize: 20.0),
      ),
    ),

    new Padding(
      padding: EdgeInsets.fromLTRB(100.0, 50, 100.0, 1),
      child: TextField(
        controller: nota2Controller,
        keyboardType: TextInputType.number,
        decoration: InputDecoration(
          hintText: "Nota 2",
          hintStyle: TextStyle(color: Colors.green),
          filled: true,
          fillColor: Colors.green.shade50,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10),
            borderSide: BorderSide.none,
          ),
        ),
        textAlign: TextAlign.left,
        style: TextStyle(color: Colors.green, fontSize: 20.0),
      ),
    ),

I'm expecting shows all my TextFields in Column.


Solution

  • This is because you are adding two children (new Padding) to the TabBarView. Put your both Padding widgets into a Column widget and the both TextField will be shown in the same tab.

    body: TabBarView(
      children: [
        new Column(
         children: [
        new Padding(
          padding: EdgeInsets.fromLTRB(100.0, 50, 100.0, 1),
          child: TextField(
            controller: nota1Controller,
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              hintText: "Nota 1",
              hintStyle: TextStyle(color: Colors.green),
              filled: true,
              fillColor: Colors.green.shade50,
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10),
                borderSide: BorderSide.none,
              ),
            ),
            textAlign: TextAlign.left,
            style: TextStyle(color: Colors.green, fontSize: 20.0),
          ),
        ),
    
        new Padding(
          padding: EdgeInsets.fromLTRB(100.0, 50, 100.0, 1),
          child: TextField(
            controller: nota2Controller,
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              hintText: "Nota 2",
              hintStyle: TextStyle(color: Colors.green),
              filled: true,
              fillColor: Colors.green.shade50,
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10),
                borderSide: BorderSide.none,
              ),
            ),
            textAlign: TextAlign.left,
            style: TextStyle(color: Colors.green, fontSize: 20.0),
          ),
        ),
    ]
    )
    

    Moreover, you don't need to use the new keyword with widgets as it's not required by dart/flutter anymore.