최근 Flutter에 도하마리하고 있는 나입니다.
앱에 자주 있는 header와 footer를 만들어 갑니다.
코드를 알기 쉽게하기 위해 우선 가장 단순한 (라고 생각되는) 방법으로 구현했습니다. header에 아이콘을 붙이는 것은 ...아무튼 간단하기 때문에 괜찮을 것입니다.
완성 이미지는 이런 느낌

lib/main.dart

main.dart 에서 header.dart 및 footer.dart 를 로드합니다.
그 외는 간단한 main.dart 파일입니다.

main.dart

import 'package:flutter/material.dart';
import 'header.dart';
import 'footer.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: Header(),
        body: Container(),
        bottomNavigationBar: Footer(),
      ),
    );
  }
}

lib/header.dart

header.dart

import 'package:flutter/material.dart';

class Header extends StatelessWidget with PreferredSizeWidget {
  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text('ホーム'),
    );
  }
}

lib/footer.dart

const 는 낡은 표현(=없어도 좋다)이라고 하는 것을 어딘가에서 들었으므로, 아래에 있는 참고의 페이지의 코드로부터 const 를 지웠습니다. 정상적으로 움직이고 있습니다.

어째서 header 는 StatelessWidget (상태를 가지지 않는 위젯)이었는데, footer 는 어째서 StatefulWidget 타카라는 상태를 가지고 있기 때문입니다. (설명이 어렵다)
Twitter라면 그 화면에 있을 때는 파랗게 됩니다. 아마도 그럴 것입니다.

footer.dart

import 'package:flutter/material.dart';

class Footer extends StatefulWidget {
  Footer();

  @override
  _Footer createState() => _Footer();
}

class _Footer extends State {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('Home'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('home'),
        ),
      ],
    );
  }
}

참고

Flutter 로 모바일 앱을 만들어 본다 입문편① ~헤더와 바닥글~