import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
/// Flutter code sample for [TabBar].
void main() => runApp(const TabBarApp());
class TabBarApp extends StatelessWidget {
const TabBarApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(useMaterial3: true),
home: const TabBarExample(),
);
}
}
class TabBarExample extends StatelessWidget {
const TabBarExample({super.key});
@override
Widget build(BuildContext context) {
return DefaultTabController(
initialIndex: 1, // 시작 인덱스 0
length: 2, //
child: Scaffold(
appBar: AppBar(
leading: Icon(CupertinoIcons.arrow_left_to_line_alt),
title: Text("Profile",style: TextStyle(fontSize: 20),),
actions: [
Icon(Icons.list),
],
),
body: Column(
children: [
Container(
height: 300,
color: Colors.blue,
),
TabBar(
tabs: <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
],
),
Expanded(
child: TabBarView(
children: <Widget>[
Center(
child: Text("It's cloudy here"),
),
Center(
child: Text("It's rainy here"),
),
],
),
),
],
),
),
);
}
}
TabBarView 만 Expended로 감싼 모습이다.
import 'package:flutter/material.dart';
/// Flutter code sample for [TabBar].
void main() => runApp(const TabBarApp());
class TabBarApp extends StatelessWidget {
const TabBarApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(useMaterial3: true),
home: const TabBarExample(),
);
}
}
class TabBarExample extends StatelessWidget {
const TabBarExample({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
height: 300,
color: Colors.blue,
),
Expanded(
child: DefaultTabController(
initialIndex: 1, // 시작 인덱스 0
length: 2, //
child: Column(
children: [
const TabBar(
tabs: <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
],
),
Expanded(
child: const TabBarView(
children: <Widget>[
Center(
child: Text("It's cloudy here"),
),
Center(
child: Text("It's rainy here"),
),
],
),
)
],
),
),
),
],
),
);
}
}
class Test1 extends StatelessWidget {
const Test1({
super.key,
});
@override
Widget build(BuildContext context) {
return DefaultTabController(
initialIndex: 1, // 시작 인덱스 0
length: 2, //
child: Scaffold(
appBar: AppBar(
title: const Text('TabBar Sample'),
bottom: const TabBar(
tabs: <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
],
),
),
body: const TabBarView(
children: <Widget>[
Center(
child: Text("It's cloudy here"),
),
Center(
child: Text("It's rainy here"),
),
],
),
),
);
}
}
DefaultTabController가 Expended로 감싸지고,
TabBarView 도 Expened로 감쌌다.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
endDrawer: Container(
width: 400,
color: Colors.amber,
),
appBar: AppBar(
leading: Icon(Icons.arrow_back),
title: Text("PROFILE04"),
centerTitle: true,
),
body: Column(
children: [
Expanded(
child: DefaultTabController(
length: 2,
child: Column(
children: [
const TabBar(
tabs: <Widget>[
Tab(
icon: Icon(Icons.directions_car),
),
Tab(
icon: Icon(Icons.train),
),
],
),
Expanded(
child: TabBarView(
children: <Widget>[
GridView.builder(
itemCount: 30, // 가져올 아이템 총 갯수
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, // 한줄에 보여줄 아이템 갯수
crossAxisSpacing: 2, // 여백 pixel 조정
mainAxisSpacing: 2, // 여백 pixel 조정
),
itemBuilder: (context, index) {
return Image.network(
"<https://picsum.photos/id/$>{200 + index}/200/300",
fit: BoxFit.cover,
);
}),
Center(
child: Text("PageRight"),
),
],
),
),
],
),
),
),
],
),
);
}
}