Display Text on right side of AppBarComponent - flutter

So I have this AppBarComponent that displays the appbar of my app.
class AppBarComponent {
static Widget titleWithImage(String title) {
return Row(
children: <Widget>[
Image.asset(
'logo.png',
fit: BoxFit.contain,
width: 40,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 10.0),
child: Text('title'),
),
Row(
children: [
Text(
'subtitle',
),
],
),
],
);
}
}
The result is something like this:
But what I want is to display the subtitle on the right side of the appbar.

Oh! I have resolved it using
Expanded(
child: Text(
'subtitle',
textAlign: TextAlign.end,
),
),
instead of wrapping it with Row.

appBar: AppBar(
leading: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.network(
"https://www.clipartmax.com/png/middle/200-2009207_francais-english-italiano-english-flag-icon-flat.png",
fit: BoxFit.cover,
width: 30.0,
height: 30.0,
),
),
title: Row(children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 10.0),
child: Text('title'),
),
Row(
children: [
Text(
'subtitle',
),
],
),
]),
flexibleSpace: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: <Color>[Colors.black, Colors.blue,Colors.black,]),
),
),
),

It's not recommended to use Widget function instead use Stateful/Stateless widgets, so you can achieve it like that...
class AppBarComponent extends StatelessWidget {
const AppBarComponent({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return AppBar(
leading: const Icon(Icons.circle), //TODO replace with your logo
title: const Text('Title'),
actions: const <Widget>[
Text('Subtitle'),
],
);
}
}

Related

Flutter: How to set the background color behind the BouncingScrollPhysics on CustomScrollView?

i want a design like image1. I use CustomScrollView with BouncingScrollPhysics for iOS. I also use CupertinoSliverRefreshControl to refresh content.
My issue is that when I pull to refresh, the background color is (as expected) the background color of the Scaffold, but I need the color of the SliverAppBar.
Any idea how I could achieve this?
Excepted:
Image1
Issue:
Image2
class TestPage extends StatelessWidget {
const TestPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
physics: const BouncingScrollPhysics(),
slivers: [
const CupertinoSliverRefreshControl(),
SliverAppBar(
backgroundColor: Colors.blue[800],
pinned: true,
elevation: 0.0,
centerTitle: true,
title: const Text("My titlte"),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.blue[800]!,
Colors.white,
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: Padding(
padding: const EdgeInsets.all(32.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Container(
color: Colors.red,
height: 200,
child: const Center(
child: Text("Widget 1"),
),
),
),
Expanded(
child: Container(
color: Colors.green,
height: 200,
child: const Center(
child: Text("Widget 2"),
),
),
),
],
),
],
),
),
),
),
const SliverPadding(padding: EdgeInsets.symmetric(vertical: 8)),
const SliverToBoxAdapter(
child: Placeholder(),
),
const SliverFillRemaining(),
],
),
);
}
}

Flutter SinglechildScrollview with column

I want the body of my page to slide, but I couldn't get it to work.
Widgets on the page compress themselves instead of sliding.
When I use single child scrollview, I get a hassize error.
If you could help with this situation, I would greatly appreciate it.
so far I have used singlechildscrollview and custom scroll but without success.
I don't know if there is something I've overlooked.
I will be glad if you help
SafeArea(
child: Scaffold(
body: Stack(
children: [
CustomAppbar(
homeIcon: true,
),
CustomBody(
height: MediaQuery.of(context).size.height * 0.7.w,
child: Column(
children: [
Padding(
padding: EdgeInsets.fromLTRB(25, 50, 25, 50),
child: ListView.builder(
shrinkWrap: true,
itemCount: 1,
itemBuilder: (context, index) {
return Column(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(25),
child: Container(
decoration:
buildProductContainerBoxDecoration(),
// PRODUCTS
child: Column(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
//PRODUCT TITLE-SUBTITLE
buildProductTitleAndSubTitle(),
// PRODUCT IMAGE-COUNTER
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
//PRODUCT IMAGE
buildProductImage(),
//PRODUCT COUNTER
Spacer(),
buildIncrementButton(viewModel),
buildProductCount(viewModel),
buildDecrementButton(viewModel),
Spacer(),
],
),
],
),
),
),
],
);
},
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
hintText: 'Açıklama',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12))),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
hintText: 'Açıklama',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12))),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
hintText: 'Açıklama',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
),
),
),
),
),
Expanded(
child: Card(
child: ListTile(
title: Text('ADRES BAŞLIĞIM'),
subtitle: Text('ADRESİM'),
trailing: Icon(
Icons.navigate_next_outlined,
),
),
),
),
Expanded(
child: Card(
child: ListTile(
title: Text('ADRES BAŞLIĞIM'),
subtitle: Text('ADRESİM'),
trailing: Icon(
Icons.navigate_next_outlined,
),
),
),
)
],
),
),
),
],
),
),
),
);
}
EDIT
I edited my custom body widget like this but the result did not change.
class CustomBody extends StatelessWidget {
final Widget? child;
final double height;
CustomBody({Key? key, this.child, required this.height}) : super(key: key);
#override
Widget build(BuildContext context) {
return Stack(
children: [
Align(
alignment: Alignment.bottomCenter,
child: CustomScrollView(
shrinkWrap: true,
slivers: [
SliverToBoxAdapter(
child: Container(
height: height,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(60),
topRight: Radius.circular(60),
),
),
child: child,
),
),
],
),
),
],
);
}
}
cannot be more than 1 Expanded widget in a column. the best option is using a CustomScrollView like this :
Scaffold(
appBar: AppBar(),
drawer: Drawer(),
body: CustomScrollView(
slivers: [
SliverList(
delegate: SliverChildListDelegate(
[
Container(height: 50, color: Colors.red), // your widget here
Container(height: 50, color: Colors.green), // your widget here
Container(height: 50, color: Colors.green), // your widget here
Container(
height: 300,
color: Colors.grey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('test'),
Text('test'),
Text('test'),
Text('test'),
],
),
), // your widget here
],
),
),
SliverToBoxAdapter(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 20),
),
),
SliverList(
delegate: SliverChildListDelegate(
[
Container(height: 50, color: Colors.red), // your widget here
Container(height: 50, color: Colors.green), // your widget here
Container(height: 50, color: Colors.green), // your widget here
Container(
height: 300,
color: Colors.grey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('test'),
Text('test'),
Text('test'),
Text('test'),
],
),
), // your widget here
],
),
),
],
),
)

Flutter Mainaxisalignment not formatting correctly

I have a problem with Flutter/Android studio that started today.
Mainaxisalignment doesn't show the correct format
"titledistance" in stead of "title distance"
I think I didn't change any code but probably pub get/upgrade,... I also have problems with my provider (I’m talking about provider for Firebase auth).
This is a total new project with only this Dart file, the same problem here. Same problem in VS-Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
String title = "title";
String value1 = "distance";
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: FittedBox(
fit: BoxFit.fitWidth,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(title),
Text(value1),
],
),
),
actions: <Widget>[
if (title != 'Settings' ) //|| title != 'Laatste Minuut Risico Analyse'
IconButton(
icon: const Icon(Icons.settings),
tooltip: 'Settings',
onPressed: () {
Navigator.pushNamed(context, '/settings');
},
),
IconButton(
icon: const Icon(Icons.logout),
tooltip: 'Logout',
onPressed: () => showDialog<String>(
context: context,
builder: (BuildContext context) => AlertDialog(
title: const Center(child: Text('Logout')),
content: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text('Are you sure you want to logout?'),
],
),
actions: <Widget>[
TextButton(
onPressed: () => Navigator.pop(context, 'Cancel'),
child: const Text('Cancel'),
),
TextButton(
onPressed: () {
//context.read<AuthenticationProvider>().signOut(context);
Navigator.pop(context, 'SignOut');
},
child: const Text('Yes'),
),
],
),
),
),
],)
,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
1- The problem is the FittedBox class which scales and positions its child within itself according to fit.
To undestand the problem, first add the BoxDecoration to your code to see this:
Code to show the BoxDecoration:
centerTitle: true,
title: Container(
decoration: BoxDecoration(border: Border.all(color: Colors.black)),
child: FittedBox(
fit: BoxFit.fitWidth,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.white)),
child: Text(
title,
style: const TextStyle(fontSize: 40),
),
),
Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.white)),
child: Text(value1)),
],
),
),
),
Using FittedBox(fit: BoxFit.fitWidth, you are forcing the box to fit to the width of the child - the black border box in the above picture.
2- Then using mainAxisAlignment: MainAxisAlignment.spaceBetween, is meaningless since there is no space at all to put between the items. unless you remove the FittedBox e.g.:
Code:
centerTitle: true,
title: Container(
decoration: BoxDecoration(border: Border.all(color: Colors.black)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.white)),
child: Text(
title,
style: const TextStyle(fontSize: 40),
),
),
Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.white)),
child: Text(value1)),
],
),
),
Now you'll see the space between:
Code:
centerTitle: true,
title: Container(
decoration: BoxDecoration(border: Border.all(color: Colors.black)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.white)),
child: Text(
title,
style: const TextStyle(fontSize: 40),
),
),
Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.white)),
child: Text('spaceBetween')),
Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.white)),
child: Text(value1)),
],
),
),
Or using just a single space Text(' '):
Now add the FittedBox:
centerTitle: true,
title: Container(
decoration: BoxDecoration(border: Border.all(color: Colors.black)),
child: FittedBox(
fit: BoxFit.fitWidth,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.white)),
child: Text(
title,
style: const TextStyle(fontSize: 40),
),
),
Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.black)),
child: Text(' ')),
Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.white)),
child: Text(
value1,
style: const TextStyle(fontSize: 40),
)),
],
),
),
),
So you have some options:
1- Use Padding for one or both items:
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(title),
),
Text(value1),
],
2- You may use dummy Container, SizedBox, or Text(' '), :
children: [
Text(title),
SizedBox(width: 8), // Container(width: 8), // Text(' '),
Text(value1),
],
or simply add one space e.g.:
Text(title + ' '),
or
Text(' ' + value1),
and see (note: Row instead of Column):
Space between Column's children in Flutter
Set the space between Elements in Row Flutter
no need to add extra code for this using one line of code we can do this.
title: FittedBox(
fit: BoxFit.fitWidth,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(title),
Text(value1),
],
),
),
replace with
title: Text("$title $value1"),
or you can use SizedBox()
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(title),
SizedBox(width:5),
Text(value1),
],
),
),

Move Row Column to bottomCenter

How move Column wrap with Row to bottomCenter?
class DetailPage extends StatelessWidget {
const DetailPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: kBackgroundColor,
body: ListView(
padding: EdgeInsets.zero,
children: [
Stack(
children: [
destinationImage(),
contentImage(),
],
)
],
),
);
}
Widget destinationImage() {
return ShaderMask(
shaderCallback: (bounds) {
return LinearGradient(
begin: Alignment.center,
end: Alignment.bottomCenter,
colors: [
kWhiteColor,
Colors.black.withOpacity(0.80),
],
).createShader(bounds);
},
child: Container(
width: double.infinity,
height: 420.0,
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage('assets/image_destination1.png'),
),
),
),
);
}
}
Widget contentImage() {
return Container(
padding: EdgeInsets.only(
left: defaultSideMargin,
bottom: 80.0,
right: defaultSideMargin,
),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Rialto Bridge',
style: whiteTextStyle.copyWith(
fontSize: 24.0,
fontWeight: semiBold,
),
),
Text(
'Italy',
style: whiteTextStyle.copyWith(
fontSize: 16.0,
fontWeight: light,
),
),
],
),
),
Container(
width: 24.0,
height: 24.0,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/icon_star.png'),
),
),
),
const SizedBox(width: 4.0),
Text(
'4.8',
style: blackTextStyle.copyWith(
fontSize: 14.0,
fontWeight: medium,
),
)
],
),
);
}
You can either use the alignment property on Stack widget.
Or you can wrap your contentImage() in a Positioned Widget
Try it on DartPad:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return const MaterialApp(
home: DetailPage(),
);
}
}
class DetailPage extends StatelessWidget {
const DetailPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: ListView(
padding: EdgeInsets.zero,
children: [
Stack(
alignment: Alignment.topCenter,
children: [
destinationImage(),
Positioned(
bottom: 0,
child: contentImage(),
)
],
)
],
),
);
}
Widget destinationImage() {
return ShaderMask(
shaderCallback: (bounds) {
return LinearGradient(
begin: Alignment.center,
end: Alignment.bottomCenter,
colors: [
Colors.white,
Colors.black.withOpacity(0.80),
],
).createShader(bounds);
},
child:
Container(width: double.infinity, height: 420.0, color: Colors.green),
);
}
}
Widget contentImage() {
return Container(
padding: const EdgeInsets.only(bottom: 80.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text('Rialto Bridge'),
Text('Italy'),
],
),
Container(
width: 24.0,
height: 24.0,
color: Colors.amber,
),
const SizedBox(width: 4.0),
const Text('4.8')
],
),
);
}
Wrap contentImage into Positioned.fill
Stack(
children: [
destinationImage(),
Positioned.fill(child: contentImage()),
],
)
full code
class DetailPage extends StatelessWidget {
const DetailPage({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
body: ListView(
padding: EdgeInsets.zero,
children: [
Stack(
children: [
destinationImage(),
Positioned.fill(child: contentImage()),
],
)
],
),
);
}
Widget destinationImage() {
return ShaderMask(
shaderCallback: (bounds) {
return LinearGradient(
begin: Alignment.center,
end: Alignment.bottomCenter,
colors: [
kWhiteColor,
Colors.black.withOpacity(0.80),
],
).createShader(bounds);
},
child: Container(
width: double.infinity,
height: 420.0,
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage('assets/image_destination1.png'),
),
),
),
);
}
}
Widget contentImage() {
return Container(
padding: EdgeInsets.only(
left: defaultSideMargin,
bottom: 80.0,
right: defaultSideMargin,
),
child: Container(
color: Colors.red,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
color: Colors.white,
child: Align(
alignment: Alignment.bottomCenter,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Spacer(),
Text(
'Rialto Bridge',
style: whiteTextStyle.copyWith(
fontSize: 24.0,
fontWeight: semiBold,
),
),
Text(
'Italy',
style: whiteTextStyle.copyWith(
fontSize: 16.0,
fontWeight: light,
),
),
],
),
),
),
Container(
width: 24.0,
height: 24.0,
decoration: const BoxDecoration(
color: Colors.green,
image: DecorationImage(
image: AssetImage('assets/icon_star.png'),
),
),
),
const SizedBox(width: 4.0),
Text(
'4.8',
style: blackTextStyle.copyWith(
fontSize: 14.0,
fontWeight: FontWeight.w600,
),
)
],
),
),
);
}

Trouble Building a Scroll-able Page with a bottom-navigation-Bar

When I am adding a bottomNavigationBar to my Page, the body of my Page will disappear. I believe the porblem to be sourced with my use of SingleChildScrollView from other posts that I have read
It does not appear to matter where I call in the bottom navigation Bar the page stops working
-homeScreen.dart
import 'package:flutter/material.dart';
import 'package:second_try/Widgets/headerHome.dart';
import 'package:second_try/Widgets/menuHome.dart';
import 'package:second_try/Widgets/businessesList.dart';
class homeScreen extends StatefulWidget {
homeScreen({Key key, this.title}) : super(key: key);
final String title;
#override
_homeScreen createState() => _homeScreen();
}
class _homeScreen extends State<homeScreen> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(body: bodyHomePage()),
);
}
}
class bodyHomePage extends StatelessWidget {
const bodyHomePage({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SingleChildScrollView(
child: Column(children: <Widget>[
headerHome(),
homeMenu(),
businessesList(),
businessesList(),
]),
),
// bottomNavigationBar: bottomNavigation(),
),
);
}
}
-------------------------------------------------------------------------------------
headerHome
import 'package:flutter/material.dart';
class headerHome extends StatelessWidget {
const headerHome({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: Container(
height: 140,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Container(
height: 140,
color: Colors.white,
),
Container(
height: 120,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.deepPurple,
Colors.deepPurpleAccent,
],
),
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 10,
),
]),
),
Positioned(
top: 98,
child: Container(
width: 340,
height: 40,
decoration: BoxDecoration(
boxShadow: [
new BoxShadow(
color: Colors.blueGrey[900],
offset: new Offset(0.0, 8.0),
blurRadius: 20.0,
)
],
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.white,
),
child: Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Padding(
padding:
const EdgeInsets.only(top: 8, left: 10),
child: TextFormField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: "What are you looking for?",
hintStyle:
TextStyle(color: Colors.grey[700]),
),
),
),
),
Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Align(
alignment: Alignment.centerRight,
child: Icon(Icons.search,
color: Colors.deepPurple)),
),
),
])),
),
Container(
height: 100,
padding: EdgeInsets.only(top: 25),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 30),
height: 35,
/* child: Image(
image: AssetImage(
'lib/assets/white-boardwalk-icon.png',
),
),*/
),
],
),
),
Container(
height: 100,
padding: EdgeInsets.only(top: 25),
child: Row(
children: <Widget>[
Expanded(
child: Center(
child: Container(
child: Text(
'Boardwalk',
style:
TextStyle(fontSize: 30, color: Colors.white),
),
),
),
),
],
),
),
],
),
],
),
),
);
}
}
-----------------------------------------------------------------------------------------------
businessList.dart
import 'package:flutter/material.dart';
class businessesList extends StatelessWidget {
const businessesList({Key key}) : super(key: key);
Padding businessCard(String category, IconData categoryIcon) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 4),
child: Container(
margin: EdgeInsets.only(left: 21),
width: 200,
child: InkWell(
child: Column(
children: <Widget>[
Center(
child: Container(
height: 140,
width: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(14)),
gradient: LinearGradient(
colors: [Colors.deepPurple, Colors.deepPurpleAccent],
),
),
child: Icon(
categoryIcon,
size: 40.0,
color: Colors.white,
),
),
),
Padding(
padding: const EdgeInsets.only(top: 12),
child: Align(
alignment: Alignment.topLeft,
child: Text(
category,
style: TextStyle(
fontSize: 22,
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 6),
child: Row(
children: <Widget>[
Container(
alignment: Alignment.topLeft,
child: Icon(Icons.star, size: 16,)),
Container(
alignment: Alignment.topLeft,
child: Icon(Icons.star, size: 16,)),
Container(
alignment: Alignment.topLeft,
child: Icon(Icons.star, size: 16,)),
Container(
alignment: Alignment.topLeft,
child: Icon(Icons.star, size: 16,)),
Container(
alignment: Alignment.topLeft,
child: Icon(Icons.star, size: 16,)),
Padding(
padding: const EdgeInsets.only(left:6.0),
child: Text(
'(356)',
style: TextStyle(
fontSize: 14,
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 6),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Sed ut perspiciatis unde omnis iste natus error sit',
style: TextStyle(
fontSize: 16,
),
),
),
),
],
),
),
));
}
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: 5.0),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 6, bottom: 12.0),
child: Container(
height: 40,
child: Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 35),
alignment: Alignment.centerLeft,
child: Text(
'List Header',
style: TextStyle(fontSize: 24),
)),
Expanded(
child: SizedBox(),
),
Container(
margin: EdgeInsets.only(right: 35),
alignment: Alignment.centerRight,
child: Text(
'View All',
style: TextStyle(fontSize: 16),
))
],
),
),
),
Container(
height: 260,
width: 400,
child:
ListView(scrollDirection: Axis.horizontal, children: <Widget>[
businessCard('Home', Icons.home),
businessCard('Eat', Icons.restaurant_menu),
businessCard('Shop', Icons.store),
businessCard('Travel', Icons.airplanemode_active),
businessCard('Play', Icons.local_activity),
businessCard('Service', Icons.business),
]),
),
],
),
);
}
--------------------------------------------------------------------------------
bottomNavigation.dart
import 'package:flutter/material.dart';
class bottomNavigation extends StatelessWidget {
const bottomNavigation ({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: 1,
items: [
BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up,), title: Text("GLO",
style: TextStyle(color: Colors.black),),),
BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up), title:
Text("MTN"),),
BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up), title:
Text("Airtel"),),
BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up), title:
Text("Airtel"),),
],
),
),
);
}
}
I am expecting both the Pages Screen and the navigation bar to be view-able but the two are not working together at the moment
I am not experiencing any error messages
_homeScreen, bodyHomePage and bottomNavigation build methods return MaterialApp - you should need only one MaterialApp, in _homeScreen, the rest should be widgets. – Melquiades 7 mins ago
Thanks for the fast help. I though I needed to call MaterialApp if I was building components outside of that original page. Thanks for the quick fix! just starting using flutter a few days ago