Is there any way how to have an IconButton in the AppBar and an IconButton in the Body the same column width? The splash radius should be default. Please have a look on a screenshot at the following link for an overview.
https://i.stack.imgur.com/O0CiM.png
I'm not sure if this is the solution that you are looking for, because your question is not clear 100%.
By default IconButton are aligned to the AppBar actions. You can check it on this sample:
https://dartpad.dev/?id=0199904cac2a477c420efe473ed21319
The result is this:
You can use SilverAppbar medium or large depend on you. This widget is new in flutter 3.3 so just update SDK to using it.
In MaterialApp you need to specify:
theme: ThemeData(useMaterial3: true)
And then in Scaffold body:
return Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar.medium(
title: const Text('Your tittle of page'),
actions: [
IconButton(onPressed: () {}, icon: const Icon(Icons.abc)),
IconButton(
onPressed: () {}, icon: const Icon(Icons.abc_outlined)),
],
),
SliverToBoxAdapter(
child: Text('Content of page'),
),
],
),
);
Related
How can I open SpeedDial in a horizontal way in my project like this?
If there are other libraries, that is fine.
You can also create your own custom floating action button. But since you are open to packages too writing an answer in which you can achieve it using a package
Try https://pub.dev/packages/custom_floating_action_button
Add this to pubspec.yaml
custom_floating_action_button: ^0.0.3
You can wrap the scaffold with CustomFloatingActionButton
//add custom floating action button on top of your scaffold
//minimum 2 and maximum 5 items allowed
#override
Widget build(BuildContext context) {
return CustomFloatingActionButton(
body: Scaffold(
appBar: AppBar(
title: const Text('appbar title'),
),
body: Container(),
),
options: const [
CircleAvatar(
child: Icon(Icons.height),
),
CircleAvatar(
child: Icon(Icons.title),
),
//All widgets that should appear ontap of FAB.
],
type: CustomFloatingActionButtonType.horizontal,
openFloatingActionButton: const Icon(Icons.add),
closeFloatingActionButton: const Icon(Icons.close),
);
}
Hi There I am working on a app where i need to use two sections in appbar one upper
1->section with logo and some Icons
2-> Search input field below the Title Section.
UI images are attached for better understanding.
you can customize the size of app bar by using toolbarHeight: 120.0 // set value
then use flexibleSpace to add column or rows
it will look something like this
import 'package:flutter/material.dart';
void main() => runApp(App());
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
toolbarHeight: 120.10, //set your height
flexibleSpace: SafeArea(
child: Container(
color: Colors.blue, // set your color
child: Column(
children: [
Row(
children: [Text("Logo")],
),
Text("data"), // set an icon or image
IconButton(
icon: Icon(Icons.search),
onPressed: () {}) // set your search bar setting
],
),
),
),
),
),
);
}
}
Just simply create your AppBar as intended, in your screenshot, you don't actually need a second Row. A TextFormField will be enough (you will actually need to customise the InputDecoration as well):
return AppBar(
title: Column(children: [
Row(children: [
Icon(Icons.menu),
Text('First row'),
const Spacer(),
Icon(Icons.person),
]),
TextFormField(),
]),
);
You can use the bottom property from the AppBar widget.
AppBar(
title: YourFirstRowWidget(),
centerTitle: true,
bottom: PreferredSize(
child: YourSearchBarWidget(),
preferredSize: null),
)
But you may want to create your own AppBar widget for a perfect result.
i am green in flutter and i have quick question, would like to make retrieve two classes SearchBar() & HomeView(), but it only allows to retrieve one class. I understand that something is missing, i would like to hear your suggestions in order to learn it better.
return Scaffold(
appBar: AppBar(
title: Text(title),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.add_box,
color: Colors.white,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
AddBookPage(uid: this.widget.uid)));
})
],
),
body: SearchBar(),
body: HomeView(),
drawer: NavigateDrawer(uid: this.widget.uid));
}
Here is the picture how i would like make it look like
I get Search Bar overflowed by Infinity pixels on the bottom
Use Column:
Scaffold(
body: Column(
children: [
SearchBar(),
SizedBox(height: 20),
Expanded(
child: HomeView(),
)
],
),
// ... your other code
)
Using a Column may be the best way.
The overflow error is probably caused by the SearchBar() widget not having a defined height. A Column widget can't have a child with infinite height.
I am creating a register app in flutter, but there is too much information tu use a single screen, so I decided to use tab views in the screens and separate the screens in objects of a drawer.
but I needed to use the information from diferent screens to saved it. so I think about using a Multiprovider. but when I try to use the information in the provider it throws:
Could not find the correct Provider<General> above this Baseformularios Widget
my implementation is like this:
Here is my drawer with the first field General, that is basic information about the client,
as you can see the provider is created here and the body: is supplied by a variable called bodycontent, that will be over written when a try to change the form, but when I try to print the name of the user it throws the error above.
MultiProvider(
providers: [
ChangeNotifierProvider<General>(
create: (context)=>General(),
)
],
child: Scaffold(
appBar: AppBar(
title: Text("Historias clinicas"),
centerTitle: true,
actions: <Widget>[
IconButton(
icon: Icon(Icons.check),
onPressed: (){
print(Provider.of<General>(context).nombre);
Provider.of<General>(context).addCLiente();
},
)
],
),
body: bodycontent,
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
AspectRatio(
aspectRatio: 0.001/0.001,
child: DrawerHeader(
decoration: BoxDecoration(
gradient: LinearGradient(colors: [Colors.white,Colors.blueAccent]
),
),
),
ListTile(
title: Text("General"),
onTap: (){
setState(() {
bodycontent = I_II_III_IV();
});
Navigator.pop(context);
},
),
],
),
),
),
);
and here is the usage on the form general:
Provider.of<General>(context).set(nombre.text,
"Apellido hay que quitar en la funcion",
edad.text,
_currentsexo,
estado_civil.text,
direccion.text,
emergencia.text,
procedencia.text,
telefono.text,
ocupacion.text,
referencia.text,
fecha_inicio.text,
"",userid);
this save well the information, I checked it in the debugger, but the problem is in the other side.
I tried using the multiprovider in the screen before the one with the drawer, but it throwed the same error but with "above generalform". notice that I removed the multiprovider from the screen with the drawer when I tried this.
so should I declare the multiprovider in every screen to use it into it's son? because I supposed that provider where variables that you could use in every screen after the one where it's declare, or am I missunderstanding something?... Every help is very appreciated, thanks before hand.
To get access to the Provider from every where in your app, you should declare it in the main:
void main() {
runApp(MultiProvider(
providers: [
ChangeNotifierProvider<General>(
create: (context) => General(),
),
],
child: MyApp(),
));
}
I was trying to make a list of chips which user can reorder by doing drag and drop gesture,
Here is sample code which you can execute to see the issue,
As being told, Chip class need a Material ancestor, so what is solution to this? Have to keep Chip wrapped with Card all the time?
Error:
The following assertion was thrown building Chip(dirty):
No Material widget found.
Chip widgets require a Material widget ancestor.
Code:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Wrap(
direction: Axis.horizontal,
children: List.generate(_counter, (i) {
var chip = Chip(
backgroundColor: Colors.blue,
label: Text('item ${i}'),
);
return Draggable(
child: chip,
feedback: chip,
childWhenDragging: Container(),
);
}),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
note: I have modified the default click count template to demonstrate my issue
You can wrap it inside a FloatingActionButton.
var chip = FloatingActionButton(
child: Chip(
backgroundColor: Colors.blue,
label: Text('item $i'),
),
);
Hope it helps!
I had encountered the same issue. You can not use chips in the feedback of draggable. What I did is, wrapped my chip in Material with transparent background. The transparent background helps to remove the extra style that gets added from the Material widget.
feedback: Material(
color: Colors.transparent,
child: Chip(
// your code for the Chip
)
)