Skip to content

Latest commit

 

History

History
102 lines (94 loc) · 2.39 KB

File metadata and controls

102 lines (94 loc) · 2.39 KB

Implements the basic Material Design visual layout structure.

  • appBar
  • body
  • bottomNavigationBar
  • drawer
  • endDrawer
  • bottomSheet
  • backgroundColor
  • floatingActionButton
  • persistentFooterButtons
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: FlutterLogo(),
        title: Text("Cart"),
        actions: [Icon(Icons.search)],
      ),
      backgroundColor: Color(0xFFf1f2f3),
      body: Center(
        child: Container(
          color: Colors.pinkAccent.shade100,
          child: Text("Flutter"),
        ),
      ),
      drawer: Drawer(),
      endDrawer: Drawer(),
      persistentFooterButtons: _persistentFooterButtons(),
      bottomSheet: _bottomSheet(),
      bottomNavigationBar: _bottomNavigationBar(),
      floatingActionButton: _floatingActionButton(),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
    );
  }

  Widget _bottomNavigationBar() {
    return BottomNavigationBar(
      items: [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: 'home'),
        BottomNavigationBarItem(icon: Icon(Icons.favorite), label: 'favorite'),
        BottomNavigationBarItem(
            icon: Icon(Icons.accessible), label: 'accessible'),
      ],
    );
  }

  Widget _bottomSheet() {
    return BottomSheet(
      onClosing: () {},
      enableDrag: false,
      builder: (BuildContext context) {
        return Container(
          height: 60,
          color: Colors.cyan,
          child: Text('Bottom Sheet'),
          alignment: Alignment.center,
        );
      },
    );
  }

  List<Widget> _persistentFooterButtons() {
    return [
      Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.cyan,
      ),
    ];
  }

  FloatingActionButton _floatingActionButton() {
    return FloatingActionButton(
      child: Text('返回'),
      onPressed: () {
        print("hello");
      },
    );
  }
}