Вкладки TabBar и TabBarView в Flutter

Когда разделы логически равны и помещаются в одну строку заголовков, используют вкладки. Переключатели рисует TabBar, а TabBarView показывает содержимое с пролистыванием влево-вправо.

Число Tab, length и потомков TabBarView должно совпадать, иначе при запуске будет ошибка. Число вкладок задаёт DefaultTabController через length и связывает TabBar с TabBarView без ручного хранения индекса. Полосу TabBar удобно положить в AppBar(bottom: ...):

import 'package:flutter/material.dart';

void main() {
	runApp(const MaterialApp(home: TabsDemoPage()));
}

class TabsDemoPage extends StatelessWidget {
	const TabsDemoPage({super.key});

	@override
	Widget build(BuildContext context) {
		return DefaultTabController(
			length: 3,
			child: Scaffold(
				appBar: AppBar(
					title: const Text('News'),
					bottom: const TabBar(
						tabs: [
							Tab(text: 'All'),
							Tab(text: 'Sports'),
							Tab(text: 'IT'),
						],
					),
				),
				body: const TabBarView(
					children: [
						Center(child: Text('All news')),
						Center(child: Text('Sports only')),
						Center(child: Text('IT only')),
					],
				),
			),
		);
	}
}

Через DefaultTabController, TabBar и TabBarView сделайте вкладки «Sign in» и «Sign up». На первой - одно поле логина, на второй - два поля. Виджет TextField, данные сохранять не нужно.