I want to use the DefaultTabController with the Scaffold at the bottom on Flutter.

Questions about Flutter's Scaffold and DefaultTabController

I am currently learning Flutter and touching the DefaultTabController.
I learned that "Scaffold comes to the bottom of the widget tree" and tried to use it in the form of a DefaultTabController on the body of Scaffold as shown in the code below, but TabBar and TabBarView are not displayed.I would like to place TabBar and TabBarView in the column.

If you look at the sample code of the DefaultTabController on various sites, the DefaultTabController comes to the bottom layer and places the Scaffold appBar on the child, TabBar on the body, and TabBarView on the body. Can't I use the DefaultTabController without that?
I think that I have decided not to display Scaffold's appBar for future apps.

How do I place the Scaffold at the bottom and place the DefaultTabController on top of it?

import'package:flutter/material.dart';

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

class MyApp extensions StatelessWidget {
  @override
  Widget build (BuildContext context) {
    US>return MaterialApp(
      title: 'Welcome to Flutter',
      home —Scaffold(
        backgroundColor:Colors.limeAccent,
        appBar: AppBar(title: Text('Welcome to Flutter!!!'), // I want to eliminate appBar in the future
        body —DefaultTabController (//I want to place the DefaultTabController on the body of Scafold)
          length —2,
          child —Column(
            mainAxisAlignment—MainAxisAlignment.center,
            children: [
              TabBar (//TabBar is not displayed)
                tabs: [
                  Tab (text: 'Tab 1'),
                  Tab (text: 'Tab 2')
                ]
              ),
              TabBarView (//TabBarView also does not appear)
                children: [
                  Text ('Page 1'),
                  Text ('Page 2')
                ]
              )
            ]
          )
        )
      )
    );
  }
}

flutter

2023-03-01 12:07

1 Answers

Self-resolved.

The cause was not "DefaultTabController is above Scaffold" but "TabBarView was not deployed in the Expanded widget" (although that is probably not the root cause).

I was able to do what I wanted to do with the code below.Sorry for the trouble.

import'package:flutter/material.dart';

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

class MyApp extensions StatelessWidget {
  @override
  Widget build (BuildContext context) {
    US>return MaterialApp(
      title: 'Welcome to Flutter',
      home —Scaffold(
        backgroundColor:Colors.limeAccent,
        body —DefaultTabController(
          length —2,
          child —Column(
            mainAxisAlignment—MainAxisAlignment.center,
            children: [
              const TabBar(
                tabs: [
                  Tab (text: 'Tab 1'),
                  Tab (text: 'Tab 2')
                ]
              ),
              Expanded (// Expanded was required)
                child —TabBarView (
                  children: [
                    Text ('Page 1'),
                    Text ('Page 2')
                  ]
                )
              )
            ]
          )
        )
      )
    );
  }
}

2023-03-01 23:03

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656