flutter-layout – Page 2

Outlined transparent button with gradient border in flutter

December 29, 2023 by Tarik

I spent about two hours on it 🙂 how to use: import ‘package:flutter/material.dart’; void main() => runApp(App()); class App extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ UnicornOutlineButton( strokeWidth: 2, radius: 24, gradient: LinearGradient(colors: [Colors.black, Colors.redAccent]), child: Text(‘OMG’, style: TextStyle(fontSize: 16)), … Read more

Specific min and max size for expanded widgets in Column

December 27, 2023 by Tarik

In short: there is no simple answer without calulating the size. First you need to know: Widget with Size dominate the avialable size in Row/Column, then Flexiable/Expanded share the remaining space. Column( children:[ Flexiable(… Expanded(… SizedBox(… // <- dominate the avialable size first ] ) And the parent widget dominate the size of the child … Read more

Change position of a Flutter Snackbar

December 26, 2023 by Tarik

Unhandled Exception: Cannot hit test a render box with no size

December 25, 2023 by Tarik

For a ListView, set shrinkWrap property to true shrinkWrap: true Why is this needed? ListView always tries to fill all the available space given by the parent element. So, let’s say that the parent is a Column, then, we know that the column takes the max height available, so if your list is longer then … Read more

Flutter ‘owner!._debugCurrentBuildTarget == this’: is not true. #87

December 24, 2023 by Tarik

I had the same issue and the problem was I had called the class inside the same class. See the body: below. Replacing it with another widget fixed the issue. class DicePage extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Colors.red, appBar: AppBar( title: Text(‘Dicee’), backgroundColor: Colors.red, ), body: DicePage(), … Read more

How to add asset image in app bar as an action icon in Flutter application?

December 20, 2023 by Tarik

Flutter – Overlay card widget on a container

December 20, 2023 by Tarik

Yes, you can acheive it with a Stack widget. You can stack a card over the background and provide a top or bottom padding. A simple example would look like: class StackDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Stack( children: <Widget>[ // The containers in the background new Column( children: <Widget>[ … Read more

Use Gradient with Paint object in Flutter Canvas

December 20, 2023 by Tarik

Yes! This is totally possible using Paint.shader. You can either create a gradient shader directly using dart:ui or convert a Flutter gradient to a shader using Gradient.createShader. dart:ui gradient import ‘dart:ui’ as ui; // In your paint method final paint = Paint() ..shader = ui.Gradient.linear( startOffset, endOffset, [ color1, color2, ], ); A real world … Read more

Flutter responsive design: Dynamically change Column to Row if the screen is larger

December 19, 2023 by Tarik

Row and Column share a common parent called Flex that takes an axis direction. Simply by changing the value of direction you can change a Flex into either a row or a column. To get the screen width you can use MediaQuery.sizeOf(context).width. Your widget should look like this: @override Widget build(BuildContext context) { bool isScreenWide … Read more

Flutter: How to Get the Number of Text Lines

December 18, 2023 by Tarik

If you simply want to know how many intrinsic lines the text contains, you can do a simple final numLines=”\n”.allMatches(yourText).length + 1; However, I guess you’re more interested in the number of lines that are actually being displayed visually. Here, things get a little more complicated, because you need to know the available space (the … Read more