今天文章来到有点迟，今天周五，一大早公司就开会，所以来晚了，今天到内容给大家放大招，一个漂亮到自定义 Scaffold到实现，还有漂亮到动画，建议收藏以后用。

本头条核心宗旨

欢迎来到技术刚刚好头条，本头条是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。

#精品长文创作季#

import 'package:flutter/material.dart';

class ExpandableText extends StatefulWidget {
  final String text;
  final int maxLines;
  final TextStyle style;
  final TextAlign textAlign;

  ExpandableText({
    required this.text,
    this.maxLines = 1,
    this.style = const TextStyle(),
    this.textAlign = TextAlign.start,
  });

  @override
  _ExpandableTextState createState() => _ExpandableTextState();
}

class _ExpandableTextState extends State<ExpandableText> {
  bool isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        final TextPainter textPainter = TextPainter(
          text: TextSpan(text: widget.text, style: widget.style),
          maxLines: isExpanded ? null : widget.maxLines,
          textDirection: TextDirection.ltr,
          textScaleFactor: MediaQuery.of(context).textScaleFactor,
        );

        textPainter.layout(maxWidth: constraints.maxWidth);

        return Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Text(
              widget.text,
              maxLines:isExpanded ? 1000 : widget.maxLines,
              overflow: TextOverflow.ellipsis,
              textAlign: widget.textAlign,
              style: widget.style,

            ),
            if (!isExpanded && textPainter.didExceedMaxLines)
              GestureDetector(
                onTap: () {
                  setState(() {
                    isExpanded = true;
                  });
                },
                child: Text(
                  'show more',
                  textAlign: widget.textAlign,
                  style: TextStyle(
                    fontSize: widget.style.fontSize,
                    color: Colors.blue,
                    decoration: TextDecoration.underline,
                  ),
                ),
              ),
            if (isExpanded)
              GestureDetector(
                onTap: () {
                  setState(() {
                   isExpanded = false;
                  });
                },
                child: Text(
                  'show less',
                  textAlign: widget.textAlign,
                  style: TextStyle(
                    fontSize: widget.style.fontSize,
                    color: Colors.blue,
                    decoration: TextDecoration.underline,
                  ),
                ),
              ),
          ],
        );
      },
    );
  }
}

本文主要讲述Flutter开发过程中的实用技巧，让你少走弯路少掉坑，属于很干的干货总结。以实用为主，算是在深入原理过程中穿插的实用篇章。

1：Text 的 TextOverflow.ellipsis 不生效

列表是移动端经常使用的一种视图展示方式，在Flutter中提供了ListView和GridView。

为了可能展示出更好的效果，我这里提供了一段Json数据，所以我们可以先学习一下Json解析。

一. JSON读取和解析

在开发中，我们经常会使用本地JSON或者从服务器请求数据后回去到JSON，拿到JSON后通常会将JSON转成Model对象来进行后续的操作，因为这样操作更加的方便，也更加的安全。

import 'package:flutter/material.dart';

class FCShakeScreen extends StatefulWidget {
  static const routeName = '/shake';

  @override
  _FCShakeScreenState createState() => _FCShakeScreenState();
}