Extend multiple classes Flutter - flutter

Question

I have a bottom navigation bar that redirects me to this classes:
final List pages = [
Home(),
Busca(),
Pedidos(),
Perfil(),
];
But i have multiple classes in each of these pages and it only shows the one it is being redirect to.
How can i show all the classes that i have in each file?
That is my file that represents the "Busca" page:
class Busca extends StatefulWidget {
#override
_BuscaState createState() => _BuscaState();
}
class _BuscaState extends State<Busca> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: SearchBar<Post>(
searchBarStyle: SearchBarStyle(
backgroundColor: Colors.tealAccent.withOpacity(0.7),
padding: EdgeInsets.all(5),
borderRadius: BorderRadius.circular(10),),
onSearch: search,
loader: Center(
child: Text("Buscando..."),
),
cancellationText: Text("Cancelar"),
crossAxisCount: 2,
indexedScaledTileBuilder: (int index) => ScaledTile.count(
index % 3 == 0 ? 2 : 2,
1,
),
hintText: "Busque Pratos ou Restaurantes",
hintStyle: TextStyle(
color: Colors.grey,
),
textStyle: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
iconActiveColor: Colors.black,
mainAxisSpacing: 20,
crossAxisSpacing: 20,
onItemFound: (Post post, int index) {
return Container(
color: Colors.tealAccent,
child: ListTile(
title: Text(post.title),
isThreeLine: true,
subtitle: Text(post.description),
)
);
},
),
),
),
);
}
}
class Categorias extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
// Row 1
Row(
children: <Widget>[
Container(
color: Colors.blue, height: 40, width: 40, child: Text('1')),
Container(
color: Colors.blue, height: 40, width: 40, child: Text('2')),
Container(
color: Colors.red, height: 40, width: 40, child: Text('3')),
],
),
]
);
}
}
When i click the button that redirects me to "Busca" the class "Categorias" does not appear below it.
How can i make it appear as well by just redirecting to "Busca"?

Answer 1

You can copy paste run full code below
You can use Column and Expaneded flex
code snippet
Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Column(
children: [
Expanded(
flex: 1,
child: SearchBar<Post>(
...
),
Expanded(flex: 1, child: Categorias())
],
working demo
full code
import 'dart:math';
import 'package:flappy_search_bar/scaled_tile.dart';
import 'package:flappy_search_bar/search_bar_style.dart';
import 'package:flutter/material.dart';
import 'package:flappy_search_bar/flappy_search_bar.dart';
class Post {
final String title;
final String body;
final String description;
Post(this.title, this.body, this.description);
}
class Busca extends StatefulWidget {
#override
_BuscaState createState() => _BuscaState();
}
class _BuscaState extends State<Busca> {
bool isReplay = false;
Future<List<Post>> search(String text) async {
await Future.delayed(Duration(seconds: text.length == 4 ? 10 : 1));
if (isReplay) return [Post("Replaying !", "Replaying body", "desc")];
if (text.length == 5) throw Error();
if (text.length == 6) return [];
List<Post> posts = [];
var random = new Random();
for (int i = 0; i < 10; i++) {
posts.add(Post(
"$text $i", "body random number : ${random.nextInt(100)}", "desc"));
}
return posts;
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Column(
children: [
Expanded(
flex: 1,
child: SearchBar<Post>(
searchBarStyle: SearchBarStyle(
backgroundColor: Colors.tealAccent.withOpacity(0.7),
padding: EdgeInsets.all(5),
borderRadius: BorderRadius.circular(10),
),
onSearch: search,
loader: Center(
child: Text("Buscando..."),
),
//cancellationText: Text("Cancelar"),
crossAxisCount: 2,
indexedScaledTileBuilder: (int index) => ScaledTile.count(
index % 3 == 0 ? 2 : 2,
1,
),
hintText: "Busque Pratos ou Restaurantes",
hintStyle: TextStyle(
color: Colors.grey,
),
textStyle: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
iconActiveColor: Colors.black,
mainAxisSpacing: 20,
crossAxisSpacing: 20,
onItemFound: (Post post, int index) {
return Container(
color: Colors.tealAccent,
child: ListTile(
title: Text(post.title),
isThreeLine: true,
subtitle: Text(post.description),
));
},
),
),
Expanded(flex: 1, child: Categorias())
],
),
),
),
);
}
}
class Categorias extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
// Row 1
Row(
children: <Widget>[
Container(
color: Colors.blue, height: 40, width: 40, child: Text('1')),
Container(
color: Colors.blue, height: 40, width: 40, child: Text('2')),
Container(
color: Colors.red, height: 40, width: 40, child: Text('3')),
],
),
]);
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: Busca(),
);
}
}

Answer 2

call Categoria within the Buca class. How you do this will depend on which type of layout you are aiming for. What you could go is place everything you have in Buca within the children of a column, the next child within children could be categoria.
This Would effectively allow whatever you have in Categoria to be rendered right after Buca.
I don't want to confuse you since you are a beginner, all you need to do is find the right widget container that can hold multiple widgets ie. something with the children attribute. Column, ListView, GridView or Row should do Just fine.
body: Column(children:[SafeArea........
, Categorias()
]'''