Related
*Create 20 container widgets side by side using the «wrap» widget
*Leave a 3-pixel space between them horizontally.
*Place the containers in the middle of the screen and type 1-2-3-4-5 in them.
I need to design a container widget in line with the above prompts, but when I ran the code I wrote, I saw that the containers are not side by side? What am I doing wrong?
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main()
{runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home:Scaffold(
appBar: AppBar(
title: Text(
"Containers in wraps",
style: TextStyle(color:Colors.greenAccent.shade400),
),
backgroundColor: Colors.black,
),
body: Padding(
padding: const EdgeInsets.all(15.0),
child: Wrap(
alignment: WrapAlignment.center,
spacing:3.0,
runAlignment: WrapAlignment.center,
runSpacing:3.0,
children: [
Expanded(
child: Container(
color: Colors.grey,
child: Center(
child: Text(
"1",
style: TextStyle(color: Colors.red,fontSize: 20),
),
),
),),
SizedBox(width:10,),
Expanded(
child: Container(
color: Colors.lightGreen,
child: Center(
child: Text(
"2",
style: TextStyle(color: Colors.red,fontSize: 20),
),
),
),),
SizedBox(width:10,),
Expanded(
child: Container(
color: Colors.lightGreen,
child: Center(
child: Text(
"3",
style: TextStyle(color: Colors.red,fontSize: 20),
),
),
),),
SizedBox(width:10,),
Expanded(
child: Container(
color: Colors.lightGreen,
child: Center(
child: Text(
"4",
style: TextStyle(color: Colors.red,fontSize: 20),
),
),
),),
SizedBox(width:10,),
Expanded(
child: Container(
color: Colors.blue,
child: Center(
child: Text(
"5",
style: TextStyle(color: Colors.red,fontSize: 20),
),
),
),),
],
),
),
),
),
);
}
Instead of Expanded use UnconstraindedBox. Following code should help:
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text(
"Containers in wraps",
style: TextStyle(color: Colors.greenAccent.shade400),
),
backgroundColor: Colors.black,
),
body: Padding(
padding: const EdgeInsets.all(15.0),
child: Wrap(
alignment: WrapAlignment.center,
spacing: 3.0,
runAlignment: WrapAlignment.center,
runSpacing: 3.0,
children: [
UnconstrainedBox(
child: Container(
constraints: const BoxConstraints.tightFor(),
color: Colors.grey,
child: const Center(
child: Text(
"1",
style: TextStyle(color: Colors.red, fontSize: 20),
),
),
),
),
const SizedBox(
width: 10,
),
UnconstrainedBox(
child: Container(
color: Colors.lightGreen,
constraints: const BoxConstraints.tightFor(),
child: const Center(
child: Text(
"2",
style: TextStyle(color: Colors.red, fontSize: 20),
),
),
),
),
const SizedBox(
width: 10,
),
UnconstrainedBox(
child: Container(
color: Colors.lightGreen,
constraints: const BoxConstraints.tightFor(),
child: const Center(
child: Text(
"3",
style: TextStyle(color: Colors.red, fontSize: 20),
),
),
),
),
const SizedBox(
width: 10,
),
UnconstrainedBox(
child: Container(
color: Colors.lightGreen,
constraints: const BoxConstraints.tightFor(),
child: const Center(
child: Text(
"4",
style: TextStyle(color: Colors.red, fontSize: 20),
),
),
),
),
const SizedBox(
width: 10,
),
UnconstrainedBox(
child: Container(
color: Colors.blue,
constraints: const BoxConstraints.tightFor(),
child: const Center(
child: Text(
"5",
style: TextStyle(color: Colors.red, fontSize: 20),
),
),
),
),
],
),
),
),
),
);
}
I wanted to aling a button to the bottom center of the listview.
Scaffold(
backgroundColor: Colors.white,
appBar: buildAppBar(context, ''),
body: ListView(
physics: ClampingScrollPhysics(),
children: [
Column(
children: [
Text(
'check up',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
SizedBox(height: 12),
Text(
'SachsenwaldStr. 3. 12157 Berlin',
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
],
),
Spacer(),
buildNextButton(context),
],
),
I tried using Align, but it didn't work, and Spacer() didn't too:
Align(
alignment: Alignment.bottomCenter,
child: buildNextButton(context),
),
is there any way to align buildNextButton to the bottom?
return Scaffold(
body: Stack(
children: [
Positioned(
bottom: 0,
width: MediaQuery.of(context).size.width,
child: Center(
child: MaterialButton(
child: Text("My button"),
onPressed: () {},
color: Colors.red,
),
),
),
ListView(
children: [
Text(
'check up',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
SizedBox(height: 12),
Text(
'SachsenwaldStr. 3. 12157 Berlin',
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
],
)
],
));
You can use Scaffold Properties to make a button centre at the bottom. Hope it would be helpful for you,Thanks
import 'package:flutter/material.dart';
class BottomButton extends StatefulWidget {
const BottomButton({Key? key}) : super(key: key);
#override
_BottomButtonState createState() => _BottomButtonState();
}
class _BottomButtonState extends State<BottomButton> {
#override
Widget build(BuildContext context) {
return Scaffold(
///you can make the centre button use floating action Button and
provide its location
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.transparent,
child: Container(
width: MediaQuery.of(context).size.width,
color: Colors.green,
child: Text(
"Button")),
onPressed: () {},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
appBar: AppBar(
title: Text("MyAppBar"),
),
body: ListView(
physics: ClampingScrollPhysics(),
children: [
Column(
children: [
Text(
'check up',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
SizedBox(height: 12),
Text(
'SachsenwaldStr. 3. 12157 Berlin',
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
],
),
],
),
///bottom sheet place button at bottom without using space
bottomSheet: Container(
width: MediaQuery.of(context).size.width,
color: Colors.green,
child: TextButton(onPressed: () {}, child: Text("Button"))),
);
}
}
You can wrap your Align widget with Expanded and in Align widget use alignment: FractionalOffset.bottomCenter .
Please find below link to get more clear idea - Button at bottom
I suggest to wrap ListView and builtNextButton with Stack Widget.
Because when ListView children is bigger than screen height, button can not be located bottom.
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget buildNextButton(context) {
return Container(height: 40, color: Colors.green);
}
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.white,
//appBar: buildAppBar(context, ''),
body: Stack(
children: [
ListView(
physics: const ClampingScrollPhysics(),
children: [
Column(
children: [
Text(
'check up',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
SizedBox(height: 12),
Text(
'SachsenwaldStr. 3. 12157 Berlin',
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
],
),
],
),
Align(
alignment: Alignment.bottomCenter,
child: buildNextButton(context),
),
],
),
),
);
}
}
Now the only way you can use it in a list view is if you are to pas it in a column widget, so the order would become, column -> Expanded -> ListView andoutside the expanded, that is where you now pass the button. Just copy and paste my code here, Hopefully it works for you.
Scaffold(
body: Column(
children: [
Expanded(
child: ListView(
// physics: ClampingScrollPhysics(),
children: [
Column(
children: [
Text(
'check up',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
SizedBox(height: 12),
Text(
'SachsenwaldStr. 3. 12157 Berlin',
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
],
),
// buildNextButton(context),
],
),
),
Container(
child: Center(
child: buildNextButton()
),
)
],
),
)
and then the buildNextButton code is
buildNextButton() {
return ElevatedButton(
style: ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 20))
,
onPressed: () {},
child: const Text('Enabled'),
);
}
the moment you render a listview as aparent widget, automatically it renders all items in alist, one after the other.
anyquestions, am available to help you out
Good luck bro
I'm using a Nestedscrollview on my application that have multiple tabs,
now the problem is:
Whenever I scroll down or up on one of my tabs the other tabs also scrolls down or up, is there a way to avoid this behavior?
thanks
There is my code
return Scaffold(
body: DefaultTabController(
length: 5,
child: NestedScrollView(
headerSliverBuilder: (context, value) {
return [
SliverAppBar(
floating: true,
snap: true,
pinned: true,
title: Text(
'MyApp',
style: GoogleFonts.cookie(
textStyle: TextStyle(
fontSize: 35.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
actions: <Widget>[
Search(),
IconButton(
icon: Icon(Icons.home_rounded),
iconSize: 25,
onPressed: () {
Navigator.of(context).pushNamed(FeedScreen.routeName);
},
color: Colors.white,
),
],
backgroundColor: Theme.of(context).colorScheme.secondary,
bottom: TabBar(
labelColor: Colors.amber,
labelStyle: TextStyle(
fontSize: 17.0,
fontWeight: FontWeight.bold,
),
isScrollable: true,
tabs: myTabs,
),
),
];
},
body: TabBarView(
children: [
EducationScreen(),
FamilleScreen(),
SportsScreen(),
InfosScreen(),
PolitiqueScreen(),
],
),
),
),
);
NestedScrollView is the child and TabBarView is under it. Means every child is effected by same NestedScrollView that's why you are getting the same scroll position on every tab, You need to apply scrollable functionality on TabBarView's children.
You can simply follow this widget.
return DefaultTabController(
length: 5,
child: Scaffold(
appBar: AppBar(
title: Text(
'MyApp',
style: GoogleFonts.cookie(
textStyle: TextStyle(
fontSize: 35.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.home_rounded),
iconSize: 25,
onPressed: () {},
color: Colors.white,
),
],
backgroundColor: Theme.of(context).colorScheme.secondary,
bottom: TabBar(
labelColor: Colors.amber,
labelStyle: TextStyle(
fontSize: 17.0,
fontWeight: FontWeight.bold,
),
isScrollable: true,
tabs: List.generate(5, (index) => Text("tab $index")),
),
),
body: TabBarView(
children: [
...List.generate(
5,
(index) => SingleChildScrollView( // you can choose `CustomScrollView` for better
child: Container(
color: index.isEven ? Colors.green : Colors.cyanAccent,
child: Column(
children: [
...List.generate(
44,
(y) => Container(
height: 100,
child: Text("tab $index item $y"),
))
],
),
),
),
)
],
),
),
);
}
Inside the 2nd Container where the Text Account and Logout is located, i'd like that this is at the Bottom of the Drawer. I Added the Widget Align and alignment:bottomCenter, but this doesn't work. I also tried is with FractionalOffset but this doesn't work aswell.
What mistake am i making here that the Container is not moved to the Bottom?
Code
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:mealapp/models/global.dart';
import 'package:mealapp/screens/meal_plan/meal_plan.dart';
import 'package:mealapp/screens/shopping_plan/shopping.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:mealapp/bloc/auth/auth_bloc.dart';
import 'package:mealapp/bloc/auth/auth_event.dart';
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
#override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.white,
statusBarBrightness: Brightness.light,
statusBarIconBrightness: Brightness.dark,
));
final authBloc = context.bloc<AuthBloc>();
return DefaultTabController(
length: 2,
child: Scaffold(
key: _scaffoldKey,
drawer: Theme(
data: Theme.of(context).copyWith(canvasColor: darkGreyColor),
child: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
child: Center(
child: Text(
'Settings',
style: darkTodoTitle,
),
),
),
ListTile(
leading:
Icon(Icons.create, color: Colors.white, size: 25),
onTap: () {},
title: Text(
'Create New List',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
Container(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: Container(
height: 1.8,
color: Colors.white54,
),
),
),
],
),
ListTile(
leading: Icon(Icons.account_box,
color: Colors.white, size: 25),
onTap: () {},
title: Text(
'Here the Lists you got access or created',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
],
),
),
Container(
child: Align(alignment: Alignment.bottomCenter,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: Container(
height: 1.8,
color: Colors.white54,
),
),
),
],
),
ListTile(
leading: Icon(Icons.account_box,
color: Colors.white, size: 25),
onTap: () {},
title: Text(
'Account',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
ListTile(
leading:
Icon(Icons.person, color: Colors.white, size: 25),
onTap: () => authBloc.add(LogoutUser()),
title: Text(
'Logout',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
],
),
),
),
],
),
),
),
appBar: AppBar(
brightness: Brightness.light,
elevation: 0,
leading: Builder(
builder: (context) => IconButton(
onPressed: () => _scaffoldKey.currentState.openDrawer(),
icon: Icon(
Icons.menu,
color: Colors.blue,
)),
),
title: TabBar(
tabs: [
Tab(
icon: Icon(Icons.fastfood),
),
Tab(
icon: Icon(Icons.local_grocery_store),
),
],
labelColor: darkGreyColor,
unselectedLabelColor: Colors.blue,
indicatorSize: TabBarIndicatorSize.label,
indicatorPadding: EdgeInsets.all(5.0),
indicatorColor: Colors.transparent,
),
backgroundColor: Colors.white,
),
body: TabBarView(
children: [
MealPage(),
ShoppingPage(),
],
),
backgroundColor: Colors.white,
),
);
}
}
You need to wrap ListTile Widget inside Align Widget and provide alignment: FractionalOffset.bottomCenter . This Align Widget should be wrapped with Expanded Widget as you mentioned in the question you missed to wrap Align inside Expanded Widget. Try as follows this will help you.
Expanded(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: ListTile(
leading: Icon(Icons.account_box,
color: Colors.white, size: 25),
onTap: () {},
title: Text(
'Account',
style: TextStyle(
color: Colors.white, fontSize: 20
),
),
),
),
),
I am trying to put the TabBar on the bottom of the app.
It worked so far, yet I can't get the pages to work (TabBarView). It just looks black and unresponsive. The TabBar is unresponsive too. Have I taken the wrong approach?
Currently, it looks like that:
And the code looks like this:
import 'package:flutter/material.dart';
void main() => runApp(Bookkeeper());
class Bookkeeper extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 4,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
verticalDirection: VerticalDirection.up,
mainAxisSize: MainAxisSize.min,
children: [
AppBar(
backgroundColor: Color(0xFF3F5AA6),
title: Container(
padding: EdgeInsets.only(top: 8.0),
child: menu(),
),
),
TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
Icon(Icons.directions_bike),
],
),
],
),
),
);
}
Widget menu() {
return TabBar(
tabs: [
Tab(
child: Container(
height: 45.0,
child: Column(
children:
[
Icon(Icons.euro_symbol),
Text(
"Transactions",
style: new TextStyle(
height: 1.5,
fontSize: 9.8,
color: Colors.white,
),
),
],
),
),
),
Tab(
child: Container(
height: 45.0,
child: Column(
children:
[
Icon(Icons.assignment),
Text(
"Bills",
style: new TextStyle(
height: 1.5,
fontSize: 9.5,
color: Colors.white,
),
),
],
),
),
),
Tab(
child: Container(
height: 45.0,
child: Column(
children:
[
Icon(Icons.account_balance_wallet),
Text(
"Balance",
style: new TextStyle(
height: 1.5,
fontSize: 9.5,
color: Colors.white,
),
),
],
),
),
),
Tab(
child: Container(
height: 45.0,
child: Column(
children:
[
Icon(Icons.settings),
Text(
"Options",
style: new TextStyle(
height: 1.5,
fontSize: 9.5,
color: Colors.white,
),
),
],
),
),
),
],
);
}
}
Use bottomNavigationBar to position the Tabs at the bottom of the screen
class Bookkeeper extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 4,
child: Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFF3F5AA6),
title: Text("Title text"),
),
bottomNavigationBar: menu(),
body: TabBarView(
children: [
Container(child: Icon(Icons.directions_car)),
Container(child: Icon(Icons.directions_transit)),
Container(child: Icon(Icons.directions_bike)),
Container(child: Icon(Icons.directions_bike)),
],
),
),
),
);
}
Widget menu() {
return Container(
color: Color(0xFF3F5AA6),
child: TabBar(
labelColor: Colors.white,
unselectedLabelColor: Colors.white70,
indicatorSize: TabBarIndicatorSize.tab,
indicatorPadding: EdgeInsets.all(5.0),
indicatorColor: Colors.blue,
tabs: [
Tab(
text: "Transactions",
icon: Icon(Icons.euro_symbol),
),
Tab(
text: "Bills",
icon: Icon(Icons.assignment),
),
Tab(
text: "Balance",
icon: Icon(Icons.account_balance_wallet),
),
Tab(
text: "Options",
icon: Icon(Icons.settings),
),
],
),
);
}
}