Flutter 연습 모음 1

YouTube를 통해 공부하고 있었는데요. 이것저것 보다 보니 사명감을 가지고 강의를 올려주는 사람들이 있더군요. 물론 그들의 구독자는 많지 않지만 열심히 올려주고 있는 것에 고마움을 전합니다. 공부하기 참 쉬운 세상인듯합니다. 하고자 하면 이렇게 정보가 많으니 말이죠.

 

Coding

import 'package:flutter/material.dart';

void main() => runApp(BottomHomepage());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyBottomNavition(),
    );
  }
}

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

  @override
  State<MyBottomNavition> createState() => _MyBottomNavitionState();
}

class _MyBottomNavitionState extends State<MyBottomNavition> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Home',
          style: TextStyle(color: Colors.black),
        ),
        centerTitle: true,
        elevation: Theme.of(context).platform == TargetPlatform.android ? 0.0 : 0.0,
        backgroundColor: Colors.white,
      ),
      floatingActionButton: FloatingActionButton.small(
        onPressed: (){},
        child: Icon(Icons.save),
        backgroundColor: Colors.amber,
      ),

      bottomNavigationBar: BottomNavigationBar(
        fixedColor: Colors.amber,
        items: [
        BottomNavigationBarItem(icon: Icon(Icons.home, color: Colors.amber,), label: 'home'),
        BottomNavigationBarItem(icon: Icon(Icons.dashboard, color: Colors.amber[900],), label: 'dashboard'),
        BottomNavigationBarItem(icon: Icon(Icons.person, color: Colors.amber[700],), label: 'Profile')
      ]),
    );
  }
}

 

결과물

Flutter 결과물

이 번 것은 하단 BottonNavigation 관련하여 이것저것 만져봤습니다. Flutter의 Version Update가 빠르기도 하지만 약간만 시간이 지난 동영상을 보면 Code가 다름을 알게 됩니다. 그럼 찾아서 고쳐보고 해 보고 여간 까다로운 것이 아니군요. 그러면서 배우는 거죠 뭐