Home > Software design >  How to insert a Column in TabBarView?
How to insert a Column in TabBarView?

Time:11-11

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.

CodePudding user response:

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 need required by dart/flutter anymore.

  • Related