웅재의 코딩세상

Shazam - view 만들어보기 4 본문

android 개발/android 실습(flutter)

Shazam - view 만들어보기 4

웅드 2023. 5. 20. 22:56

 

 

  • 두번째 페이지에서 왼쪽으로 스와이프 하면 첫번째 화면이 나오고, 오른쪽으로 스와이트 하면 세번째 화면이 나오게 하기 위해 DefaultTabController를 사용해 TabBarView로 Page들을 넘길 수 있게 해주었다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

import 'package:flutter/material.dart';
import 'SecondPage.dart';
import 'ThildPage.dart';
import 'FirstPage.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shazam',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 1,
      length: 3,
      child: Scaffold(
        body: Stack(
          children: [
            TabBarView(
              children: [
                FirstPage(),
                SecondPage(),
                ThirdPage(),
              ],
            ),
            SafeArea(
                child: Container(
              alignment: Alignment.topCenter,
            ))
          ],
        ),
      ),
    );
  }
}
반응형