Ik probeer de titeltekst te centreren in een app-balk die zowel een voorloop- als een volgactie heeft.
@override
Widget build(BuildContext context) {
final menuButton = new PopupMenuButton<int>(
onSelected: (int i) {},
itemBuilder: (BuildContext ctx) {},
child: new Icon(
Icons.dashboard,
),
);
return new Scaffold(
appBar: new AppBar(
// Here we take the value from the MyHomePage object that
// was created by the App.build method, and use it to set
// our appbar title.
title: new Text(widget.title, textAlign: TextAlign.center),
leading: new IconButton(
icon: new Icon(Icons.accessibility),
onPressed: () {},
),
actions: [
menuButton,
],
),
body: new Center(
child: new Text(
'Button tapped $_counter time${ _counter == 1 ? '' : 's' }.',
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
Dit werkt goed, behalve dat de titel aan de linkerkant is uitgelijnd, zoals op deze afbeelding wordt getoond:
Terwijl ik probeer de titel in het midden op te nemen, lijkt het alsof deze te veel naar links staat:
@override
Widget build(BuildContext context) {
final menuButton = new PopupMenuButton<int>(
onSelected: (int i) {},
itemBuilder: (BuildContext ctx) {},
child: new Icon(
Icons.dashboard,
),
);
return new Scaffold(
appBar: new AppBar(
// Here we take the value from the MyHomePage object that
// was created by the App.build method, and use it to set
// our appbar title.
title: new Center(child: new Text(widget.title, textAlign: TextAlign.center)),
leading: new IconButton(
icon: new Icon(Icons.accessibility),
onPressed: () {},
),
actions: [
menuButton,
],
),
body: new Center(
child: new Text(
'Button tapped $_counter time${ _counter == 1 ? '' : 's' }.',
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
Ik zou graag een oplossing willen om de titeltekst perfect gecentreerd te krijgen tussen de 2 pictogrammen.
Antwoord 1, autoriteit 100%
Het centreren van de titel is de standaardinstelling op iOS. Op Android is de titel van de AppBarstandaard links uitgelijnd, maar u kunt deze overschrijven door centerTitle: trueals argument voor de AppBar-constructor.
Voorbeeld:
AppBar(
centerTitle: true, // this is all you need
...
)
Antwoord 2, autoriteit 6%
Ik had hetzelfde probleem en het werkte eindelijk toen ik de
. toevoegde
mainAxisSize: MainAxisSize.minnaar mijn rij-widget. Ik hoop dat dit helpt!
return new Scaffold(
appBar: new AppBar(
// Here we take the value from the MyHomePage object that
// was created by the App.build method, and use it to set
// our appbar title.
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
widget.title,
),
],
),
leading: new IconButton(
icon: new Icon(Icons.accessibility),
onPressed: () {},
),
actions: [
menuButton,
],
),
);
}
Antwoord 3, autoriteit 3%
In mijn geval wilde ik een logo / afbeelding gecentreerd hebben in plaats van een tekst. In dit geval is centerTitleniet genoeg (weet niet waarom, ik heb een svg-bestand, misschien is dat de reden… ), dus bijvoorbeeld dit:
appBar: AppBar(centerTitle: true, title: AppImages.logoSvg)
zal de afbeelding niet echt centreren (plus de afbeelding kan te groot zijn, enz.). Wat voor mij goed werkt, is een code als deze:
appBar: AppBar(centerTitle: true,
title: ConstrainedBox(
constraints: BoxConstraints(maxHeight: 35, maxWidth: 200),
child: AppImages.logoSvg)),
Antwoord 4, autoriteit 2%
Hier is hoe ik centerTitle op mijn appbar maak:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
centerTitle: true ,
title: new Text("Login"),
),
body: new Container(
padding: EdgeInsets.all(18.0),
key: formkey,
child: ListView(
children: buildInputs() + buildSubmitButton(),
),
)
);
}
Antwoord 5
Hier is een andere benadering als u een aangepaste app-balktitel wilt maken. U wilt bijvoorbeeld een afbeelding en een tekst in het midden van de app-balk en voeg vervolgens
. toe
appBar: AppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.your_app_icon,
color: Colors.green[500],
),
Container(
padding: const EdgeInsets.all(8.0), child: Text('YourAppTitle'))
],
),
)
Hier hebben we een Rowgemaakt met MainAxisAlignment.centerom de kinderen te centreren. Vervolgens hebben we twee kinderen toegevoegd – een pictogram en een Containermet tekst. Ik heb de widget Textin de Containergewikkeld om de nodige opvulling toe te voegen.
Antwoord 6
Je kunt de titel van een appBar centreren met de parameter centerTitle.
centerTitleis Boolean Datatype en de standaardwaarde is False.
centerTitle: true
Voorbeeld:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('App Title'),
backgroundColor: Colors.red,
centerTitle: true,
),
),
),
);
}
Antwoord 7
Na vele oplossingen geprobeerd te hebben, heeft dit me geholpen centerTitle: true
voorbeeldcode toevoegen naast @Collin Jacksonantwoord
Voorbeeld
in build(BuildContext context)
doe dit
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),centerTitle: true
),
Antwoord 8
appbar:AppBar(
centrumTitel: waar,
titel:Text(“HALLO”)
)
Antwoord 9
appBar heeft zijn eigen bool-voorwaarde voor al dan niet weergeven van titelcentrum,
dus,
als je true instelt,
appBar: AppBar(
title: Text(
"header Text",
style: TextStyle(color: Colors.black),
),
centerTitle: true,
),
dan is het in het midden, anders dan de standaard links uitgelijnd (in Android)
ios set center (standaard).
Antwoord 10
Je kunt gewoon de eigenschap centerTitle in de appBar-sectie gebruiken om je titel te centreren
Antwoord 11
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Title'),
actions: <Widget> [
IconButton(icon: const Icon(Icons.file_upload), onPressed: _pressed),
],
leading: IconButton(icon: const Icon(Icons.list), onPressed: _pressed),
centerTitle: true,
)
body: Text("Content"),
);
}
Antwoord 12
Ja, maar in mijn geval gebruikte ik zowel centertitle als as-uitlijning, toen maakte het het centrum, als ik er alleen van gebruik, dan maakt het het niet centreren, hier is hoe ik het doe:
import 'package:flutter/material.dart';
import 'package:infintywalls/widgets/widget.dart';
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
appName(),
],
),
elevation: 0.0,
centerTitle: true,
),
);
}
}
en ja trouwens appName() is mijn aangepaste widget, geen standaard ingebouwde widget.
home dit is nuttig voor u
bedankt
Antwoord 13
Dit kan helpen bij het maken van Appbar-titeltekst in Center.
Je kunt ervoor kiezen om je gewenste stijlen toe te voegen met behulp van Stijl of er commentaar op te geven als dat niet nodig is.
appBar: AppBar(
title: const Center(
child: Text(
"App Title",
style: TextStyle( color: Colors.white,fontSize: 20),
),
),
),
Op app-weergave:
Antwoord 14
In mijn geval werkt deze code:-
appBar: AppBar(
centerTitle: true,
elevation: 2,
title: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: Text(" TINKLE"),
)
],
),
),
),
Ik hoop dat dit nuttig was.
Antwoord 15
Gebruik Centerobject
appBar: AppBar(
title: Center(
child: const Text('Title Centered')
)
)