flutter-layout

问题 A lot of native mobile chat messengers, like telegram, whatsapp, etc, implement this wrapping behaviour: wrapping time label to a new line when there is no enough room for text. Simple chat bubble consist of two parts: Text and time label. In simple case, they are almost positioned on the same baseline. Even when the text is multiline (baseline with last line). But in some cases, when there is no free space and the texts are trying to intersect, an indent is added at the bottom of bubble. It

问题 I tried to add text editing format option like in the gmail app. But when highlight the text there' is not a format option. Is it possible to handle selecting alert? (Copy/cut/paste). Or is there a way to add format bar like gmail? TextField( controller: _categoryController, decoration: InputDecoration( border: InputBorder.none, hintText: "Enter Category Name", ), ), I added screenshot and gif files to better understanding my question. Selecting option on my Flutter application Selecting

问题 I would like to vertically align a DropdownButton right next to a TextField . Row( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ DropdownButton<String>( ... ), Flexible( child: TextField( ... ), ), ], ) The current behavior is: As you can see, the bottom lines aren't aligned. I guess that's happening due to a differences in height. What would be a good practice to fix that? (I'm guessing not using a fixed height) My final goal is something like this: Where both lines and

问题 I need to use SingleChildScrollView in order to be able to use keyboard_actions so that i can put a "Done" button on top of the keyboard in iOS (using a numeric keyboard at the moment) The SingleChildScrollView will have a column as a child and then a button to be placed at the bottom. I tried using LayoutBuilder to enforce a height to the SingleChildScrollView . LayoutBuilder( builder: (BuildContext context, BoxConstraints viewportConstraints) { return SingleChildScrollView( child:

问题 As you can see in the picture below, the texts have the same amount of characters, but since the number "1" is slimmer than the "5" and "2", both texts get a different width. How can I adjust that in Flutter? 回答1: Use a monospaced font, also called a fixed-pitch, fixed-width, or non-proportional font, is a font whose letters and characters each occupy the same amount of horizontal space. Wikipedia explains it well. https://en.wikipedia.org/wiki/Monospaced_font 回答2: Hiepav suggestion, seems a

问题 Is there any way to create something like these dots, which can help in expanding TextField . 回答1: Screenshot: Create a widget. class ExpandableTextField extends StatefulWidget { final double height; final double maxHeight; final double dividerHeight; final double dividerSpace; final Widget child; const ExpandableTextField({ Key key, @required this.child, this.height = 44, this.maxHeight = 300, this.dividerHeight = 40, this.dividerSpace = 2, }) : super(key: key); @override

问题 How can I find out which items are currently visible or invisible in a ListView ? For example, I have 100 items in ListView and when i scroll to top of screen or list, I want to detect which items appear or disappear from the viewport. Illustration: 回答1: There is no easy way to do this. Here is the same question, however, it does not have an answer. There is an active GitHub issue about this. There are multiple solutions for the problem in that issue. This Gist features one that requires the

问题 I want to overlay a Card with a white container, but the container always needs a height (otherwise it's not displayed). I want it to be as big as its parent, the stack. How can I make this work? The height of the card varies. I guess I'm missing something ;) return new Stack( children: <Widget>[ new Card( ... ), new Container(color: Colors.white70), ] ); 回答1: You can use a Positioned.fill to force a stack child to fill Stack . Stack( children: [ Card(), Positioned.fill( child: Container

问题 I'm trying to take square pictures in my app. I'm using the camera package and I'm trying to display a centre square-cropped version of the CameraPreview widget. My goal is to show the central square of the preview (full width), with an even amount cropped from the top and bottom. I was struggling to get this to work, so I created a minimal example using a fixed image. (Apologies for the dull picture of me in a chair): import 'package:flutter/material.dart'; void main() => runApp(new MyApp())

问题 Is there any way to change color on particular word in a string ? Text("some long string") now i want to give color to only long word. can someone tell me how can i do this programatically ? eg:- I am long a really long and long string in some variable, a long one now here i want to seperate long word. I can seperate simple string to highlight one word but not sure how to find and highlight each of these words. 回答1: Wrap the word in a TextSpan and assign style properties to change the text