Posts

Showing posts with the label Flutter Layout

Add Border To A Container With BorderRadius In Flutter

Image
Answer : It's not possible to add border: and borderRadius: at the same time, you'll get this error: A borderRadius can only be given for uniform borders. You can achieve what you want using the borderRadius: and a boxShadow: instead of border: like this: boxShadow: [ BoxShadow(color: Colors.green, spreadRadius: 3) ] Your sample code would be like this: Container( child: Text( 'This is a Container', textScaleFactor: 2, style: TextStyle(color: Colors.black), ), decoration: BoxDecoration( borderRadius: BorderRadius.circular(10), color: Colors.white, boxShadow: [ BoxShadow(color: Colors.green, spreadRadius: 3), ], ), height: 50, ), Edit: To achieve the example you now provided, you could do this: Container( padding: EdgeInsets.only(left: 12.0), decoration: BoxDecoration( borderRadius: BorderRadius.circular(10.0), color: Colors.green, ), height: 50, child: Container( decoration: BoxD...

Center Expanded ListView Inside Column Flutter

Image
Answer : The ListView fills the entire Expanded Widget, that's why using the Center widget didn't work, so shrinkWrap: true should be added so the ListView takes only the height of it's children. After skimming through the documentation I found about Flexible Widget Flexible, which does not force the child to fill the available space. Made the change and works like a charm Flexible( child: ListView.builder( shrinkWrap: true, itemCount: 4, itemBuilder: (BuildContext context, int index) => CustomAppText( text: 'Custom App', ), ), ), For those still looking for an answer, this is what worked for me: Column( children: [ Container(), // some top content Expanded( child: Center( child: ListView( shrinkWrap: true, children: [] //your list view co...

Adding A Gradient Background To Appbar On Flutter

Image
Answer : I don't believe you can pass a gradient to an AppBar as it expects a Color rather than a gradient. You can, however, create your own widget that mimics an AppBar except by using a gradient. Take a look at this example that I've pieced together from the Planets-Flutter tutorial along with the code below it. import "package:flutter/material.dart"; class Page extends StatelessWidget { @override Widget build(BuildContext context) { return Column(children : <Widget>[GradientAppBar("Custom Gradient App Bar"), Container()],); } } class GradientAppBar extends StatelessWidget { final String title; final double barHeight = 50.0; GradientAppBar(this.title); @override Widget build(BuildContext context) { final double statusbarHeight = MediaQuery .of(context) .padding .top; return new Container( padding: EdgeInsets.only(top: statusbarHeight), height: statusbarHeight + barHeigh...

Change LabelText Direction To RTL In InputDecoration() Flutter

Answer : Simply use Directionality: new Directionality( textDirection: TextDirection.rtl, child: TextField( textAlign: TextAlign.right, controller: _textEdittingControler_bookName, autofocus: true, decoration: new InputDecoration( labelText: "افزودن کتاب", hintText: "نام کتاب را وارد کنید" ), ) Directionality's docs Can be used textAlign TextFormField( textAlign: TextAlign.right, decoration: InputDecoration( hintText: 'ادخل تفاصيل الكتابة الخاصة بك', ),