Flutter Ink InkWell code Sample (1)

一个文字和图片水波纹按钮的示例

import 'package:flutter/material.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatefulWidget {

  const MyApp({super.key});

  @override

  State<MyApp> createState() => _MyAppState();

}

class _MyAppState extends State<MyApp> {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        body: Align(

          alignment: Alignment.centerLeft,

          child: Row(

            crossAxisAlignment: CrossAxisAlignment.start,

            mainAxisAlignment: MainAxisAlignment.spaceEvenly,

            children: [

              Ink.image(

                fit: BoxFit.cover,

                width: 400,

                height: 280,

                image: const AssetImage("assets/images/cat.jpeg"),

                child: InkWell(

                  splashColor: Colors.greenAccent,

                  onTap: () {

                    print("click image button");

                  },

                ),

              ),

              Ink(

                width: 400,

                height: 280,

                color: Colors.blueAccent,

                child: InkWell(

                  splashColor: Colors.greenAccent,

                  onTap: () {

                    print("click text button");

                  },

                  child: const Center(

                    child: Text(

                      "Button",

                      style: TextStyle(color: Colors.white, fontSize: 32),

                    ),

                  ),

                ),

              ),

            ],

          ),

        ),

      ),

    );

  }

}


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容