[flutter] 플러터(IndexedStack)를 사용하여 웹 애플리케이션과 모바일 애플리케이션을 구현할 수 있나요?

07 Dec 2023

flutter

플러터에서 웹 애플리케이션과 모바일 애플리케이션을 동시에 구현하려면, IndexedStack을 사용하여 웹과 모바일 페이지의 전환을 간편하게 할 수 있습니다. 예를 들어, 웹 버전과 모바일 버전의 화면 구성이 다를 경우, 각각 다른 자식 위젯을 IndexedStack에 추가하고, 필요에 따라 인덱스를 변경하여 화면을 전환할 수 있습니다.

아래는 IndexedStack을 사용하여 웹과 모바일 애플리케이션의 구현 예시입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final List<Widget> _pages = [
    WebHomePage(),
    MobileHomePage(),
  ];
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: IndexedStack(
          index: _currentIndex,
          children: _pages,
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: (index) => setState(() => _currentIndex = index),
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.web),
              label: 'Web',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.mobile_screen_share),
              label: 'Mobile',
            ),
          ],
        ),
      ),
    );
  }
}

class WebHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Web Home Page',
        style: TextStyle(fontSize: 24),
      ),
    );
  }
}

class MobileHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Mobile Home Page',
        style: TextStyle(fontSize: 24),
      ),
    );
  }
}

위 예시에서는 웹 홈페이지(WebHomePage)와 모바일 홈페이지(MobileHomePage)라는 두 개의 자식 위젯을 가지고 있는 IndexedStack을 사용하여 화면 전환을 구현하고 있습니다. 현재 인덱스에 따라 해당하는 홈페이지가 보여지며, 바텀 네비게이션 바(BottomNavigationBar)를 통해 인덱스를 변경할 수 있습니다.

이와 같은 방식으로 IndexedStack을 활용하여 웹 애플리케이션과 모바일 애플리케이션을 구현할 수 있습니다.

참고 자료: