Я создаю панель инструментов из флаттера. в моем коде я использовал однодетский прокрутки, и он не работает. и я получаю Синяя линия в конце страницы перед нижней панелью навигации. Я думаю, это потому, что страница не прокручивается. В консоли не отображается ошибка. как мне это исправить? оцените вашу помощь в этом.
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())),
],
),
);
}
}
[![][1]][1]
//нижняя навигация
импортировать 'пакет: флаттер/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,
),
);
}
}
@JoãoSoares Пожалуйста, смотрите мой обновленный ответ.
Хорошо, я пробую ваш код, и вот результат, у меня нет синей линии. В вашем случае я думаю, вы можете попробовать 2 возможных решения.
Первый — обернуть столбец singleChildScrollView, но я думаю, вам понадобятся 2 столбца: один для singleChildScrollView, а другой — для нижней панели навигации. Что-то вроде этого:
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 )),
],
),
Во-вторых, у вашего BottomNavigation проблема с синей линией, и я не могу ее проверить, потому что не вижу вашего кода.
Я также добавил нижний навигационный код в вопрос. Пожалуйста, проверьте сейчас
Кажется, что ошибка возникает из-за того, как вы реализовали свой BottomNavigationBar, если вы попробуете на более крупном устройстве, вы заметите, что даже напечатано сообщение «Образец BottomNavigationBar». Вот ссылка для правильной реализации blog.logrocket.com/…
Глядя на обновленный код, оба класса возвращают Scaffold
с Appbar
. Таким образом, синее поле, которое вы видите внизу, — это Appbar класса _BottomNavigationState
.
Пожалуйста, обратитесь к коду ниже для правильной реализации BottomNavigationBar
.
Объяснение
Как правило, если кто-то хочет инкапсулировать BottomNavigationBar
в свой собственный Widget
, этот Widget
должен возвращать BottomNavigationBar
в своем методе build()
и нет в Scaffold
.
Но обычно BottomNavigationBar
используется, как показано ниже, без использования дополнительного виджета.
Код
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,
),
);
}
}
Источник
https://www.geeksforgeeks.org/bottomnavigationbar-widget-in-flutter/
Я также добавил нижний навигационный код в вопрос. Пожалуйста, проверьте сейчас
У вас есть цвет фона, определенный в вашем MaterialApp или любом другом родительском виджете?