How to make full page with widgets in a TabBarView widget

flutter tabbar without appbar
flutter custom tabbar
flutter tabs in body
flutter tabs in container
flutter tabcontroller
flutter tabbar ontap
bottom tab bar flutter
flutter dynamic tabs

I'm trying to create an app containing tabs beneath the AppBar.

appBar: AppBar(
  bottom: TabBar(
    labelColor: Color(0xFF1778f2),
    unselectedLabelColor: Colors.black87,
    indicatorColor: Color(0xFF1778f2),
    tabs: <Widget>[
      Tab(icon: Icon(Icons.home)),
    ],
  ),
),

Which works. But the problem is residing when creating its contents in a TabBarView. The documentation shows an example showing a simple Icon for each tab, and that's it. I'm trying to create many more widgets with Image, TextField, Columns, etc. But things aren't as simple as the documentation expresses it to be.

This is my HomeScreen, placed as at the top of TabBarView:

body: TabBarView(
  children: <Widget>[
    HomeScreen(),
  ,
),
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              CircleAvatar(),
              TextField(),
            ],
          );
        ],
      ),
    );
  }
}

And then, errors like

RRenderBox was not laid out: _RenderDecoration#f0d71 relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart':

Failed assertion: line 1687 pos 12: 'hasSize'

which are many, all pointing to my HomeScreen. What's missing that the documentation doesn't show?

A screenshot with many of the errors.

I have a code demo as below. Your problem may be that you didn't set size for widget and set tabcontroller for tabbar and tabview. I hope that it can help you

class TabBarDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return TabBarDemoState();
  }
}

class TabBarDemoState extends State<TabBarDemo> with TickerProviderStateMixin {
  TabController _controller; ///<-- fixed here

  @override
  void initState() {
    super.initState();
    _controller = TabController(length: 1, vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _controller, ///<-- fixed here
          labelColor: Color(0xFF1778f2),
          unselectedLabelColor: Colors.black87,
          indicatorColor: Color(0xFF1778f2),
          tabs: <Widget>[
            Tab(icon: Icon(Icons.home)),
          ],
        ),
        title: Text('Tabs Demo'),
      ),
      body: TabBarView(
        controller: _controller,
        children: [
          HomeScreen(),
        ],
      ),
    );
  }
}
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;
    return Container(
      height: screenSize.height, // <--fixed here
      width: screenSize.width, // <--fixed here
      child: ListView(
        children: <Widget>[
          Row(
            children: <Widget>[
              CircleAvatar(),
              Container( // <--fixed here
                width: screenSize.width / 2, // <--fixed here
                child: TextField(),
              ),// <--fixed here
            ],
          ),
        ],
      ),
    );
  }
}

DefaultTabController & TabBar (Flutter Widget of the Week), Do you need to organize your widgets into tabs? The DefaultTabController, TabBar, and Duration: 1:08 Posted: 22 Jan 2020 Each tab can be associated with a widget if we create TabBarView in the body of Scaffold with multiple widgets. The widget at the 1st position will automatically be assigned to the first tab, 2nd widget with second tab and so on. The code for the body with TabBarView shall look like. body: new TabBarView(children: <Widget>[new Text("You've

It's simple. You can use any widget inside TabBarView. But to change the page according to Tab change, you have to use TabBarController or wrap with DefaultTabBarController.

Here is a bare minimal cleaner example with DefaultTabBarController:

import 'package:flutter/material.dart';

class SimpleTabBar extends StatefulWidget {
  @override
  _SimpleTabBarState createState() => _SimpleTabBarState();
}

class _SimpleTabBarState extends State<SimpleTabBar> {
  List<Widget> tabs;

  @override
  void initState() {
    tabs = [
      buildTab("Dart", Icons.favorite),
      buildTab("Flutter", Icons.thumb_up)
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 0,
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text("Title"),
          bottom: buildTabBar(context),
        ),
        body: TabBarView(
          children: <Widget>[
            buildTabView(Colors.redAccent),
            buildTabView(Colors.greenAccent)
          ],
        ),
      ),
    );
  }

  Container buildTabView(Color color) {
    return Container(
      color: color,
      child: Column(
        children: List.generate(20, (index) => Text("$index")),
      ),
    );
  }

  Widget buildTab(String title, IconData icon) =>
      Column(children: <Widget>[Icon(icon), Text(title)]);

  TabBar buildTabBar(BuildContext context) => TabBar(tabs: tabs);
}

Screenshot:

Work with tabs, Create a TabController . widget. In this example, create a TabBar with three Tab widgets and place it within an For this purpose, use the TabBarView widget. This is widget list, but usually, we put Tab list here, Let's look at the constructor of the Tab. The icon , child are all widgets, the text is a string. Let's use them to see the effect.

The issue is the TextField(). It needed to be wrapped around Expanded(). Solved.

Widgets 12, In this article, you will learn how to use the TabBarView and TabBar in the flutter. As these fore tutorials, we should create a page to show our code, I will do this in this tutorial as well. This is widget list,but usually, we put Tab list here, Let's look at the constructor of the Tab . Tab({ Whole code in GitHub,star to support. Now, let’s define the TabBarView which have two screens. So when the user clicks on one of the icons, it will display the associated the Screens. Save the file and go to the terminal and type the following command. Please make sure that both iOS and Android Simulators are open. We will check the output on both the Virtual Devices. flutter run

Checkout how the rows and columns are managed inside TabBarView, The problem is with your defining TextField.

class NetworkDiagnosis extends StatefulWidget {
  @override
  _NetworkDiagnosisState createState() => _NetworkDiagnosisState();
}

class _NetworkDiagnosisState extends State<NetworkDiagnosis> {
  @override
  Widget build(BuildContext context) {
    return  DefaultTabController(
      length: 3,
      child:  Scaffold(
        appBar:  AppBar(
          title:  Text("Tabs"),
          bottom:  TabBar(
            tabs: <Widget>[
              Tab(text: 'One'),
              Tab(text: 'Two'),
              Tab(text: 'Three'),
            ],
          ),
        ),
        body:  TabBarView(
          children: <Widget>[
            Center(child:  HomeScreen()),
            Center(child:  Text('Two')),
            Center(child:  Text('Three')),
          ],
        ),
      ),
    );
  }
}


class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Text('One'),
          Text('Two'),
          Row(
            children: <Widget>[
             Container(
               width: 300,
               height: 100,
               child:  TextField(
                 // controller: new TextEditingController(text: 'Enter data'),
                 keyboardType: TextInputType.text,
                 decoration: InputDecoration(
                     border: InputBorder.none,
                     hintText: "Enter Password",
                     hintStyle: TextStyle(fontSize: 16.0)),
               ),
             )

            ],
          )
        ],
      ),
    );
  }
}

TabBarView which in column in SingleChildScrollView needs to , Steps to Reproduce I have a page which contains a TabBar, some other widgets and a TabBarView releated to the above TabBar. @override Widget build( BuildContext context) { return Container( to create vertical scrollbar in the entire page if necessary like the height of tabbarview content is big. If you can reproduce, make the inspector window huge and take a look at the details subtree for the TabBarView. You should be able to see how the two child widgets are connected to the parent widgets which could help narrow down whether this is a bug in the widgets or the framework.

Flutter Widgets 12 | TabBarView&TabBar | by NieBin, As these fore tutorials, we should create a page to show our code, In this article , you will learn how to use the TabBarView and TabBar in the flutter This is widget list, but usually, we put Tab list here, Let's look at the constructor of the Tab The whole code in Github: https://github.com/FlutterOpen/ebook� I'm trying to make a profile page, where the users info is at the top. And then have a tab view below that for different views. This is the code I'm using at the moment, when I take the TabBarView

Dynamic TabBar and TabBarView in Flutter, The other day I was making quite complex and customisable TabBar and MainPage is our main single screen as Stateful widget because we will _generalWidgets — list of TabBarView children items. getTabs method simply clears whole _tabs list, loops through how many pages you want to have� Edit: At the home page there are some buttons which take the user to the Tabbed Page, At that Page the TabBarView has Page 2 with different Strings passed, now Page 2 is used to call a widget which verifies user login, logout and stuff and returns the correct widget.

Flutter: Creating Multi Widget Applications with TabBar, Flutter is a mobile App SDK by Google which helps in creating Recap : Everything displayed on the screen is a widget. TabBar : Creating Multi Widget Applications. In general, a multi widget application consists of widgets which are Each tab can be associated with a widget if we create TabBarView in� However, we need to provide a widget in the body called TabBarView which can take multiple child widgets. By default, the child widget declaration sequence will automatically map to the tabs, i.e. First widget will be called for the first Tab, Second Widget will be called for the second tab and so on.

Comments
  • Sorry, the error persists. I updated the question with a screenshot of the errors.
  • Hi, this solution in the documentation is not enough. I want to be able to add many more things inside each tab content. But as always, documentation only showing the simplest of things and done. I updated my question showing the errors I am having when trying to add more than just a Text widget.
  • You means you need to add some more widgets like Rows and columns inside TabBarView- children
  • @gamofe Please check your TextField(), It should be given some height and width or it should wrap with Expanded.