タブ表示の書き方

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '検索画面',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SearchTopPage(),
    );
  }
}

// 検索画面
class SearchTopPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text('検索'),
          bottom: TabBar(tabs: [
            Tab(text: 'あげる'),
            Tab(text: '欲しい'),
            Tab(text: '活用事例'),
          ]),
        ),
        body: TabBarView(
          children: [
            SearchGivePage(),
            SearchWantPage(),
            SearchExamplePage(),
            // Center(child: Text('あげる')),
            // Center(child: Text('欲しい')),
            // Center(child: Text('活用事例')),
          ],
        ),
      ),
    );
  }
}

// 検索画面（あげる）
class SearchGivePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('あげる'));
  }
}

// 検索画面（欲しい）
class SearchWantPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('欲しい'));
  }
}

// 検索画面（活用事例）
class SearchExamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('活用事例'));
  }
}

wigetをreturnするときにDefaultTabControllerでラッピングして返してあげる。

その際に、タブの数を指定する。この部分。

// 検索画面
class SearchTopPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text('検索'),
          bottom: TabBar(tabs: [
            Tab(text: 'あげる'),
            Tab(text: '欲しい'),
            Tab(text: '活用事例'),
          ]),
        ),
        body: TabBarView(
          children: [
            SearchGivePage(),
            SearchWantPage(),
            SearchExamplePage(),
            // Center(child: Text('あげる')),
            // Center(child: Text('欲しい')),
            // Center(child: Text('活用事例')),
          ],
        ),
      ),
    );
  }
}

そして、タブ化したい部分はTabBarViewで該当する中身をchildren:として返してあげればOK。そのウィジェットは外だししても良いし。中に直接書いても良い。