Calling Layout (Menu) elements in separate files

Question

Good morning, you guys! I’m developing an App on Flutter and already have several screens developed. I would like to know how to create a file .Dart with a Bottom Navigation Menu and call him on all the canvases that are already created.

Thanks in advance.

Answer 1

Come on:

You can create a file called 'widgets' where you will keep all the widgets that will be used on more than one screen. Example:

import 'package:flutter/material.dart';

class BottomNavigationMenu extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return Container(
  height: 55.0,
  child: BottomAppBar(
    color: Colors.grey[300],
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        IconButton(
          iconSize: 30.0,
          icon: Icon(Icons.account_circle),
          onPressed: () {},
        ),
        IconButton(
          iconSize: 30.0,
          icon: Icon(Icons.favorite_border),
          onPressed: () {},
        ),
      ],
    ),
   ),
  );
 }
}

And now go to your screens, and call by the class 'Bottomnavigationmenu()', Example:

 @override
 Widget build(BuildContext context) {
 return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  bottomNavigationBar: BottomNavigationMenu(),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'Teste BottomNavigation',
        ),
      ],
    ),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: _incrementCounter,
    tooltip: 'Increment',
    child: Icon(Icons.add),
  ), // This trailing comma makes auto-formatting nicer for build methods.
);

}

Remembering the import of your widgets class'.

import 'package:flutter_testes/widgets.dart';