'Blue line at the end of the screen flutter
I'm creating a dashboard from flutter. in my code, I have used the singlechildscroll view and it's not working. and I'm getting a blue line at the end of the page before the bottom navigation bar. I think it's because the page is not scrollable. There's no error display in the console. how do I correct this? appreciate your help on this.
import 'package:flutter/material.dart';
import '../constants/colors.dart';
import '../widgets/bottomNavigation.dart';
class DashboardScreen extends StatefulWidget {
const DashboardScreen({Key? key}) : super(key: key);
@override
_DashboardScreenState createState() => _DashboardScreenState();
}
class _DashboardScreenState extends State<DashboardScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: [
Padding(
padding: const EdgeInsets.only(right: 15),
child: Container(
width: 30,
child: Image.asset(
'assets/images/user.png',
),
),
),
],
backgroundColor: Colors.transparent,
elevation: 0.0,
iconTheme: IconThemeData(color: Colors.black),
),
drawer: Drawer(),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 20, left: 20),
child: Text(
"Hi, NEO",
style: TextStyle(
fontSize: 25,
color: Colors.black,
fontWeight: FontWeight.bold,
//fontFamily: "Dubai"
),
),
),
SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
height: 100,
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.green,
),
),
Container(
height: 100,
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.deepPurple,
),
),
Container(
height: 100,
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.blue,
),
),
],
),
// SizedBox(
// height: 30,
// ),
Row(
children: [
Padding(
padding: const EdgeInsets.only(top: 30, left: 20),
child: Text(
"Your Leads",
style: TextStyle(
fontSize: 20,
color: Colors.black,
fontWeight: FontWeight.bold,
//fontFamily: "Dubai"
),
),
),
],
),
SizedBox(
height:30 ,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 75,
width: 350,
decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 75,
width: 350,
decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
)
],
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 75,
width: 350,
decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(10),
color: Colors.lightGreen,
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
)
],
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 75,
width: 350,
decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
)
],
),
Expanded(child: Container(child: BottomNavigation())),
],
),
);
}
}
[![enter image description here][1]][1]
//bottomnavigation
import 'package:flutter/material.dart';
class BottomNavigation extends StatefulWidget {
const BottomNavigation({Key? key}) : super(key: key);
@override
State<BottomNavigation> createState() => _BottomNavigationState();
}
class _BottomNavigationState extends State<BottomNavigation> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
Solution 1:[1]
Looking at the updated code, both classes return a Scaffold with an Appbar. Thus, the blue box you see at the bottom is the Appbar of the class _BottomNavigationState.
Please refer to the code below for a correct implementation of a BottomNavigationBar.
Explanation
Generally, if one wants to encapsulate a BottomNavigationBar in its own Widget, this Widget needs to return a BottomNavigationBar in its build() method and not a Scaffold.
But usually, a BottomNavigationBar is used as shown below, without using an extra Widget.
Code
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'HOME PAGE',
style: optionStyle,
),
Text(
'COURSE PAGE',
style: optionStyle,
),
Text(
'CONTACT GFG',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('GeeksForGeeks'),
backgroundColor: Colors.green,
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
// HERE ! bottomNavigationBar: MyBottomNavigatioBar(...)
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.bookmark),
title: Text('Courses'),
),
BottomNavigationBarItem(
icon: Icon(Icons.contact_mail),
title: Text('Mail'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
Source
https://www.geeksforgeeks.org/bottomnavigationbar-widget-in-flutter/
Solution 2:[2]
Okay I try your code and this is the result, I dont have any blue line, In your case I think you can try 2 possible solutions.
First one is to wrap your column with a singleChildScrollView, but I think you´ll need 2 columns one for the singleChildScrollView and another for the bottomNavigationBar. Something like this:
body: Column(
children: [
SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 20, left: 20),
child: Text(
"Hi, NEO",
style: TextStyle(
fontSize: 25,
color: Colors.black,
fontWeight: FontWeight.bold,
//fontFamily: "Dubai"
),
),
),
SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
height: 100,
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.green,
),
),
Container(
height: 100,
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.deepPurple,
),
),
Container(
height: 100,
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.blue,
),
),
],
),
// SizedBox(
// height: 30,
// ),
Row(
children: [
Padding(
padding: const EdgeInsets.only(top: 30, left: 20),
child: Text(
"Your Leads",
style: TextStyle(
fontSize: 20,
color: Colors.black,
fontWeight: FontWeight.bold,
//fontFamily: "Dubai"
),
),
),
],
),
SizedBox(
height:30 ,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 75,
width: 350,
decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 75,
width: 350,
decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
)
],
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 75,
width: 350,
decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(10),
color: Colors.lightGreen,
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
)
],
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 75,
width: 350,
decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
)
],
),
],
),
),
Expanded(child: Container( BottomNavigation )),
],
),
The second one is that your BottomNavigation have the problem of the blue line, and I can't test it because I don't see your code.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | lasd |