오공완 (with Do it! 플러터 앱 프로그램밍) #5_1

// 이곳에 쓴 내용은 앱 만들기라는 버킷리스트를 달성하기 위해 플러터를 공부하면서 정리하고 있는 내용입니다.

플러터에 대해 아는 것이 거의 없기 때문에 정리하면서 오류가 있을 수 있습니다.

오류를 발견하신 분은 댓글 남겨 주시면 감사하겠습니다.

 

   탭바로 화면 이동하기

 

최근에 공부할 때는 책과 함께 github 파일과 함께 보고 있다. 방식과 코드가 버전이 바뀌면서 다르기 때문.

책에서는 lib폴더 밑에 package를 선택해 폴더를 생성하라고 되어 있는데, new-Directory를 선택하고, 'sub' 폴더명을 넣고, 그 밑에 Dart File을 'firstPage'로 이름을 붙여 만들었다. 그리고 코드를 입력 후 secondPage 다트 파일은 복사 붙여넣기로~

 

그러던 중 왼쪽은 내가 사용하는 데모다트, 오른쪽은 제공해 준 데모다트 코드. 여기에서도 다름이 존재하네. 어쩌지..

import 'package:flutter/material.dart';

import 'sub/firstPage.dart';
import 'sub/secondPage.dart';

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

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


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});


  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme
              .of(context)
              .colorScheme
              .inversePrimary,
          title: Text('TabBar Example'),
        ),
        body: TabBarView(
          children: <Widget>[FirstApp(), SecondApp()],
          controller: controller,
        ),
        bottomNavigationBar: TabBar(tabs: <Tab>[
          Tab(icon: Icon(Icons.looks_one, color: Colors.blue),),
          Tab(icon: Icon(Icons.looks_two, color: Colors.blue),)
        ], controller: controller,
        )
    );
  }
  TabController? controller;

  @override
  void initState() {
    super.initState();
    controller = TabController(length: 2, vsync: this);
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }
}

우여곡절 속에 드디어 해결했다. 열심히 따라 타이핑했는데 알고 보니 깃허브 2.0버전을 따라하고 있었고, 3.X 버전에는 이 코드를 제공하지 않았다. 5-2장 내용만 제공하고 있어서 필요한 부분이라고 생각되는 부분만 따라서 타이핑을..

몇 시간이 걸린 거니..

blue가 이쁜 거 같다.

오늘 오전 공부는 여기까지~