Source file with incoming error
Bottom Navigation Bar Code
In your BottomNavigationBar there's an items property:
Scaffold(
bottomNavigationBar: BottomNavigationBar(items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
]));
this property accepts a List<BottomNavigationBarItem>. Now, the length of this list should be at least 2.
For example:
Scaffold(
bottomNavigationBar: BottomNavigationBar(items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(icon: Icon(Icons.search), label: 'search'),
]),
);
but your providing only one BottomNavigationBarItem, so make sure you have at least one more BottomNavigationBarItem
Related
What is this black rectangle space that pops on top of the keyboard when clicking on a text form field? The issue only occurs when on an Android device using the web browser. It also seems very inconsistent as you can see on the GIF, sometimes it occurs, sometimes it does not. I could not figure what it is because there were no error logs occurring when doing remote debugging. In the remote debugging, the keyboard displays on the middle(the black thing) and there is some white space on the bottom (see second picture below). Would you know what could be causing this? This app is running on an older version of Flutter by the way which is 2.10.5 so was this a known issue? I've added the Scaffold code below and TextFormField for reference. If someone can point me to the right direction, it would be much appreciated!
This is the code for the main Scaffolding:
return Scaffold(
backgroundColor: Colors.black87,
body: SafeArea(
bottom: false,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(Images.backgroundImg),
fit: BoxFit.fitHeight)),
child: PageLayout(
header: NotAuthorizedHeader(
isBackPress: false,
),
child: LoginLayout(
onLogin: props.login,
loading: props.isAuthenticating,
authMessageError: props.authMessageError),
getMoreList: () {},
loadingMore: false,
),
),
),
);
Then this is the text form field snippet:
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
placeholder,
style: GoogleFonts.poppins(
fontSize: 14,
fontWeight: FontWeight.w500,
color: AppColors.gray3),
),
const SizedBox(height: 10),
TextFormField(
validator: validator,
onChanged: onChanged,
keyboardType: keyboardType,
obscureText: obscureText,
style: GoogleFonts.poppins(
color: AppColors.gray10,
fontSize: 13,
fontWeight: FontWeight.w400),
decoration: InputDecoration(
filled: true,
fillColor: AppColors.gray9,
hoverColor: AppColors.gray9,
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(4),
),
),
onEditingComplete: () {},
onFieldSubmitted: (value) {
onSubmit();
},
)
],
);
I have solved this problem after further testing. Apparently the black rectangle was being caused by the resizeToAvoidBottomInset: true property of the Scaffold on mobile web browsers. So the fix was to set the Scaffold property resizeToAvoidBottomInset: false when the platform is on web.
I'm sorry that I have never see or used an actual device with android OS such as Google pixcel, but I found that gray-out area on top of screen like screen shot below.
*This is "Pixcel 4 API 30 mobile emulator" called from vsCode.
And I found this kind of dead area on Pixcel 5 emulator as well, but am not sure that this is somthing in common for all android OS.
Finally, I'd like to ask that if I should avoid something to display here or this is only emulator matters and do not have to care about this ?
In case that I have to care this area with developing by flutter, should I intentionally separate code or design between these kind of device and the others, as I'm usually using Iphone emulator and actual machine but have never seen this area and beleive I need not to care this kind of area and adopting top-margin for this problem.
Thanks for your helpful comment.
Code Added:
class holder extends ConsumerWidget {
#override
Widget build(BuildContext context, WidgetRef ref) {
ref.watch(_modalProvider );
return Scaffold(
body: Column(
children: [
Container(
margin: const EdgeInsets.only(bottom: 10),
// flex: 1,
child: Container(
margin: EdgeInsets.only(top: 40),//should I do this to avoid this area?
width: double.infinity,
height: 40,
// color: Colors.grey,
alignment: Alignment.topLeft,
child: Image.asset('images/flutter.png'),
),
),
Flexible(
child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
Folders(
name: "list",
subTitle: null,
),
],
)
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.endTop,
floatingActionButton: Container(
width: 50.0,
child: FloatingActionButton(
backgroundColor: Colors.white,
child: const Icon(
Icons.search_sharp,
color: MyStyle.mainColor,
),
onPressed: () {
ref.read(_modalProvider.notifier).update((state){
showTopModalSheet<String?>(context, DumyModal());
});
},
),
),
);
}
}
That area will be also visible in real devices so you should take that area into consideration. But Scaffold widget will start the rendering from below that point so you don't have to think about it.
İf you want to change color of that area, you can
Container(
decoration: BoxDecoration(color: Color.white),
child: SafeArea(
Scaffold:...
)
)
It also effects IOS and Android devices differently, I believe that is why it is only visible in some devices
I’m new to Flutter and I’m trying to do something that looks like this for my app :
So that I can switch between them and they will display two different pages.
What’s this template called ? Can you link me to some websites that could help code it.
Thank you!
It's called tabs or tab bar. Check out the documentation
https://docs.flutter.dev/cookbook/design/tabs
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: const TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
),
),
);
I need to implement such a widget in Flutter. Full version of the page, where this widget is going to be used is here Maybe you know build-in widgets, which could help me. But if there are none, what is the best way to implement this widget?
You can use a ListTile
ListTile(
leading: const Text("Lbikgabsb"),
trailing: Column(
children: [
const Text("900 P"),
const Text("2"), // add your decoration to the background
),
],
),
),
Alternatively you can use:
SizedBox(
height: your_height,
width:double.infinity,
child: Row(
children:[
Text("Lbikgabsb"),
Column(
children: [
const Text("900 P"),
const Text("2"), // add your decoration to the background
],
),
),
You can choose whichever approach works best for your app
The problem is that I have a RichText inside a Scrollable Widget(SingleChildScrollView or ListView) and I need to Scroll to a specific TextSpan inside the RichText. Also, I cannot use ScrollablePositionedList because the texts should write in the end of the last one and if there was no space to continue the text should go to the next line so I have to use RichText.
Similar to
Sample Code:
ListView(
children:[
RichText(
children: AListOfTextSpansThatICreateWithIndexes(),
),
],
),
Sample Text That I want to show:
This is TextSpan1 and it is a bit
long. This is TextSpan2 and its ok.
Similar to Scrollable position of a TextSpan within a RichText
There is a way to make sure a key is visible on the screen using the Scrollable.ensureVisible method. (credits to the person who deleted their comment)
you should first generate keys for your list:
var keys = List.generate(LENGTH, (i) => GlobalKey());
Then use the keys behind each TextSpan:
Text.rich(
TextSpan(
children: Iterable.generate(LENGTH, (i) => i)
.expand((i) => [
WidgetSpan(
child: SizedBox.fromSize(
size: Size.zero,
key: keys[i],
),
),
TextSpan(
text: 'this is text number $i',
),
])
.toList(),
),
),
Finally, call this function(where there is access to the context) to scroll to the desired key:
Scrollable.ensureVisible(
keys[i].currentContext,
alignment: 0.2,
duration: Duration(milliseconds: 500),
),