TabBar is a widget used to display tabs in a horizontal row. It is
often used in conjunction with TabBarView to create tabbed interfaces,
where each tab corresponds to a different view of content. This is a
simple example of how to use TabBar in Flutter.
Here's a simple example of using a TabBar in Flutter:
File open lib->main.dart file −
import 'package:flutter/material.dart';
void main() {
runApp(
MyApp()
);
}
class MyApp extends StatefulWidget{
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text('SingleChildScrollView Example',
style:TextStyle(fontSize: 20,color: Colors.white)),
),
body: SingleChildScrollView(
child: Column(
children: [
Container(
height: 100,
padding: EdgeInsets.all(10),// Set a height that exceeds the screen size
color: Colors.white,
child: Center(
child: Text(
'Micro Tutorial Text!',
style: TextStyle(fontSize: 25, color: Colors.blue),
),
),
),
Container(
padding: EdgeInsets.all(10),
color: Colors.white,
child: Center(
child: Text(
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isnt anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.',
style: TextStyle(fontSize: 20, color: Colors.black),
),
),
),
],
),
),
));
}
}
Open
Device Manager, run the emulator, and then run the application. Next,
check the working output and check the output you declared in your
code.
Output: